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

Use CSS3 media queries or javascript's window.onresize event handler. http://www.w3schools.com/jsref/event_onresize.asp — Shahid, Jan 13 '11 at 19:36
If you are using bootstrap add a class like this class="img-thumbnail". Thats all to it. — VivekDev, Feb 03 '17 at 09:53
Does this answer your question? [How do I auto-resize an image to fit a 'div' container?](https://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container) — vsync, Apr 10 '21 at 12:34

score 201 · Answer 1 · edited Jun 20 '20 at 09:12

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 25 '12 at 15:26

Kurt Schindler

21,037
4
43
48

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 01 '12 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. – Kurt Schindler Mar 01 '12 at 16:28
OK, then I've incorrectly assumed that this is the point of this question, sorry. – GDR Mar 03 '12 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 07 '13 at 19:18
For anyone wondering about what `auto\9` does, see the question [CSS \9 in width property](http://stackoverflow.com/questions/8004765/css-9-in-width-property). Basically, it causes the style to only be applied in IE 7, 8, and 9. – Frank Tan Aug 25 '16 at 19:13

roberrrt-s · Answer 2 · 2020-05-11T22:09:22.443

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.

edited May 11 '20 at 22:09

answered Jan 19 '18 at 09:57

roberrrt-s

7,914
2
46
57

thanks! How do I determine vh and vw when I have images with different sizes? – Herman Toothrot May 28 '19 at 12:11
Hi @HermanToothrot, are you saying you want to keep the aspect ratio while using viewport units? – roberrrt-s May 28 '19 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. – Herman Toothrot May 29 '19 at 04:01
Either do width: 100% and max-height: 50vh or inverse – roberrrt-s May 29 '19 at 04: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. – Herman Toothrot May 30 '19 at 07:30

Shahid · Answer 3 · 2011-01-13T20:40:31.920

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

edited Jan 13 '11 at 20:40

answered Jan 13 '11 at 19:49

Shahid

668
8
16

score 6 · Answer 4 · edited Oct 21 '16 at 20:19

6

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

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

edited Oct 21 '16 at 20:19

KyleMit

30,350
66
462
664

answered Jul 09 '14 at 09:07

fmoradi9

61
1
2

Arthur Neves · Answer 5 · 2011-01-13T21:13:14.493

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>

edited Jan 13 '11 at 21:13

answered Jan 13 '11 at 19:34

Arthur Neves

11,840
8
60
73

2

jQuery is unnecessary for such a simple problem. Why would loading 50 KB+ (entire library) be beneficial over a few lines of JS? – Jan 13 '11 at 20:16
2

sure, you are completely right, that`s why I`m asking him, if he is using jQuery because if he does might be a good idea just add the plugin! – Arthur Neves Jan 13 '11 at 20:23
so without JS it is not possible? I found simple solution like this one http://unstoppablerobotninja.com/search/2b573b893776d794f0a31bf578100721/, however I was not able to fully implement it in my template sucessfully – depi Jan 13 '11 at 20:47

score 4 · Answer 6 · edited Oct 21 '16 at 20:29

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.

edited Oct 21 '16 at 20:29

KyleMit

30,350
66
462
664

answered Aug 14 '15 at 20:32

Rin

49
1

score 3 · Answer 7 · edited Feb 18 '22 at 20:33

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;
}

edited Feb 18 '22 at 20:33

Zoe

27,060
21
118
148

answered Nov 20 '19 at 03:53

Daniel Nyamasyo

2,152
1
24
23

score 2 · Answer 8 · edited Oct 21 '16 at 20:22

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:

edited Oct 21 '16 at 20:22

KyleMit

30,350
66
462
664

answered Aug 27 '14 at 11:21

ShahRokh

1,005
14
31

score 0 · Answer 9 · answered Feb 19 '20 at 08:33

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.

answered Feb 19 '20 at 08:33

Ryan Stone

345
4
19

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

9 Answers9

2018 and later solution:

Linked

Related