CODEWITHSUNDEEP
cssimage
darkchampionz
darkchampionz

Reputation: 1224

CSS - Make image fit screen so no scroll bars appear

If you click to view a very big image that is higher than your screen res on google images, like this for example http://p1.pichost.me/i/32/1548022.png then it appears a + and - on cursor. The + makes the image have its original size, while the - makes the image fit the screen, but not the full screen, so that no scroll bars appear. I try to implement this last part on my css code but I didn't had much success, I tried setting overflow-x:hidden; and overflow-y:hidden; but this gives the original unscrollable size. What should I do? Ty

Upvotes: 3

Views: 27507

Answers (4)

kaikkeus
kaikkeus

Reputation: 11

Nowadays we have object-fit readily available.

However, I discovered that in some cases, like when the container element boundaries are met, you need to add display:block to the image, otherwise scrollbars would appear, no matter what (for example display:inline-block doesn't work). This is the simplest method I've found to show the full image and nothing else:

<style>
body {margin:0px;}
img {
    height:100vh;
    width:100vw;
    object-fit:contain;
    display:block;
}
</style>

<body><img src="big-image.jpg"></body>

Also, if you want to use % unit for the image, you have to set width and height (in something more concrete than %) for the container. Even when using object-fit:cover, you need to set display:block for the image.

<style>
body {
    height:100vh;
    width:100vw;
    margin:0px;
}
img {
    height:100%;
    width:100%;
    object-fit:cover;
    display:block;
}
</style>

<body><img src="big-image.jpg"></body>

Or you could have it without display:block and with height:100% and no other heights, if you leave out <!DOCTYPE html>, and you can omit other things too, but I don't recommend these things. Also, in many situations you might not see the benefit of display:block for the image, but it can be a good practice to prevent future problems brought by outlier cases. You can still have the container element with some other display value.

Additionally, we also now have new dynamic viewport units, dvh for height (not so readily available, but it can be handy), if you want to avoid content overflowing on mobile browsers, where the browser might add UI elements that decrease the available space.

Upvotes: 1

Terry
Terry

Reputation: 66113

It is easier if you use CSS background instead of the <img> element. We will use the background-size: contain property to achieve the sizing that you are looking for. With the exception of IE8, all recent modern browsers support this property-value combination.

p/s: You can change the dimensions of the image container as you please, but I'm using viewport units to best illustrate the example.

body {
  margin: 0;
  padding: 0;
  }
div.img {
  background-image: url('http://p1.pichost.me/i/32/1548022.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100vw;
  height: 100vh;
  }
<div class="img"></div>

Upvotes: 10

M.Melih
M.Melih

Reputation: 36

First you need to set width and height of body or the outer div or element of the image

body or #div{
width:100vw;
height:100vh;
}

Then set your img width and height to 100% or background-size to 100% 100%

Upvotes: 1

anonymous
anonymous

Reputation: 4064

If you bind the image on <img>, then make that image element flexible by setting

/* your css and you img */
#your-image { 
    width:100%;
    height:100%; 
}

If you bind the image on some element as its background...

/* your css and your element */
#some-element { 
    background-image:url(/*path*/);
    background-size:100% 100%;
}

It looks like you want to show the whole large image only in a page. So your <body> element or a nested wrapper element will be a good candidate for the css

Upvotes: 0

Related Questions