How can I resize an image dynamically with CSS as the browser width/height changes?

Question

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.)

Solution 1

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).

Solution 2

2018 and later solution:

Using viewport-relative units should make your life way easier, given we have the image of a 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.

Solution 3

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

Solution 4

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

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

Solution 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>

View more solutions

Comments

[Admin]

jQuery is unnecessary for such a simple problem. Why would loading 50 KB+ (entire library) be beneficial over a few lines of JS?

[Arthur Neves]

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!

[depi]

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

[GDR]

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

[Kurt Schindler]

@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.

[GDR]

OK, then I've incorrectly assumed that this is the point of this question, sorry.

[Mave]

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%.

[Leonardo Wildt]

What kind of sorcery is this?! This is awesome!

[Frank Tan]

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.

[Herman Toothrot]

thanks! How do I determine vh and vw when I have images with different sizes?

[roberrrt-s]

Hi @HermanToothrot, are you saying you want to keep the aspect ratio while using viewport units?

[Herman Toothrot]

@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.

[roberrrt-s]

Either do width: 100% and max-height: 50vh or inverse

[Herman Toothrot]

@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.