123

I wonder how I could make an image resize along with the browser window, here is what I have done so far (or download the whole site in a ZIP).

This works okay in Firefox, but it has problems in Chrome: the image does not always resize, it somehow depends on the size of the window when the page was loaded.

This also works okay in Safari, but sometimes the image is loaded with its minimum width/height. Maybe this is caused by the image size, I am not sure. (If it loads okay, try to refresh several times to see the bug.)

Any ideas on how could I make this more bulletproof? (If JavaScript will be needed I can live with that, too, but CSS is preferable.)

3

9 Answers 9

201

This can be done with pure CSS and does not even require media queries.

To make the images flexible, simply add max-width:100% and height:auto. Image max-width:100% and height:auto works in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to add width:auto\9 for IE8.

source: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

CSS:

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

And if you want to enforce a fixed max width of the image, just place it inside a container, for example:

<div style="max-width:500px;">
    <img src="..." />
</div>

JSFiddle example here. No JavaScript required. Works in latest versions of Chrome, Firefox and IE (which is all I've tested).

5
  • I tested the jsfiddle link with both Opera 11 and some recent Firefox and while it nicely resizes the image when the window shrinks, it fails to do so when the window grows beyond 650px
    – GDR
    Mar 1, 2012 at 15:15
  • 3
    @GDR I wouldn't want the image to grow beyond its native size, it would just pixelate and look ugly. If you have a need to make larger, I'd just start with a bigger image. Mar 1, 2012 at 16:28
  • OK, then I've incorrectly assumed that this is the point of this question, sorry.
    – GDR
    Mar 3, 2012 at 12:19
  • 3
    Setting max-width to 100% and height to auto did nothing for me - I indeed worked with a container. Wrap the image in a div, set the max height/width, and let the image (#div img {}) be width 100% and height 100%.
    – Mave
    Oct 7, 2013 at 19:18
  • For anyone wondering about what auto\9 does, see the question CSS \9 in width property. Basically, it causes the style to only be applied in IE 7, 8, and 9.
    – Frank Tan
    Aug 25, 2016 at 19:13
51

2018 and later solution:

Using viewport-relative units should make your life way easier, given we have the image of a cat:

cat

Now we want this cat inside our code, while respecting aspect ratios:

img {
  width: 100%;
  height: auto;
}
<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

So far not really interesting, but what if we would like to change the cats width to be the maximum of 50% of the viewport?

img {
  width: 100%;
  height: auto;
  /* Magic! */
  max-width: 50vw;
}
<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

The same image, but now restricted to a maximum width of 50vw vw (=viewport width) means the image will be X width of the viewport, depending on the digit provided. This also works for height:

img {
  width: auto;
  height: 100%;
  max-height: 20vh;
}
<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

This restricts the height of the image to a maximum of 20% of the viewport.

5
  • thanks! How do I determine vh and vw when I have images with different sizes? May 28, 2019 at 12:11
  • Hi @HermanToothrot, are you saying you want to keep the aspect ratio while using viewport units?
    – roberrrt-s
    May 28, 2019 at 12:28
  • @Roberrrt say I have a few images of different sizes and in an inline-block, and want to keep the aspect ratio of all of them but set them at the same height or width. May 29, 2019 at 4:01
  • Either do width: 100% and max-height: 50vh or inverse
    – roberrrt-s
    May 29, 2019 at 4:02
  • @Roberrrt width: 100% doesn't seem to have much of an effect. I just have to guess vh, in my case 50 is too much and 40 maximizes the height of all images. May 30, 2019 at 7:30
11
window.onresize = function(){
    var img = document.getElementById('fullsize');
    img.style.width = "100%";
};

In IE onresize event gets fired on every pixel change (width or height) so there could be performance issue. Delay image resizing for few milliseconds by using javascript's window.setTimeout().

http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html

0
6

Set the resize property to both. Then you can change width and height like this:

.classname img{
  resize: both;
  width:50px;
  height:25px;
}
5

Are you using jQuery?

Because I did a quickly search on the jQuery plugings and they seem to have some plugin to do this, check this one, should work:

http://plugins.jquery.com/project/jquery-afterresize

EDIT:

This is the CSS solution, I just add a style="width: 100%", and works for me at least in chrome and Safari. I dont have ie, so just test there, and let me know, here is the code:

            <div id="gallery" style="width: 100%">
                <img src="images/fullsize.jpg" alt="" id="fullsize" />
                <a href="#" id="prev">prev</a>
                <a href="#" id="next">next</a>
            </div>
3
  • 2
    jQuery is unnecessary for such a simple problem. Why would loading 50 KB+ (entire library) be beneficial over a few lines of JS?
    – user1385191
    Jan 13, 2011 at 20:16
  • 2
    sure, you are completely right, thats why Im asking him, if he is using jQuery because if he does might be a good idea just add the plugin! Jan 13, 2011 at 20:23
  • so without JS it is not possible? I found simple solution like this one unstoppablerobotninja.com/search/…, however I was not able to fully implement it in my template sucessfully
    – depi
    Jan 13, 2011 at 20:47
4

Initially, I was using the following html/css:

img {
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}
<div> 
  <img src="..." />
</div>

Then I added class="img" to the <div> like this:

<div class="img">
  <img src="..." />
</div>

And everything started to work fine.

0
3

Just use this code. What most are forgeting is to specify max-width as the max-width of the image

img {   
    height: auto;
    width: 100%;
    max-width: 300px;
}
2

You can use CSS3 scale property to resize image with css:

.image:hover {
  -webkit-transform:scale(1.2); 
          transform:scale(1.2);
}
.image {
  -webkit-transition: all 0.7s ease; 
          transition: all 0.7s ease;
}

Further Reading:

0
0

Try

.img{
   width:100vw; /* Matches to the Viewport Width */
   height:auto;
   max-width:100% !important;
}

Only works with display block and inline block, this has no effect on flex items as I've just spent ages trying to find out.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.