Flexible, dynamically resizing images with CSS

11 Flares Twitter 1 Google+ 10 LinkedIn 0 Email -- 11 Flares ×

I has long been a question of mine: how can I utilize a large image that looks good in most windows, but dynamically scales down as the browser window and/or screen resolution is smaller? There may be various Javascript and other hacks to do so, but I just recently learned that you can do it with pure CSS. No Javascript, no media queries, just plain ole vanilla CSS.

Here’s a simple example on Codepen.

700px width image

The above image is 700×55 pixels. I have a flexible layout and several CSS media queries, but as you begin to resize your browser window you will see that the image will start to be resized automagically by your browser. It’s all because of the CSS below.

Images can be made flexible with the following CSS:

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

Just specify 100% as the max-width, and auto as the height. The width: auto\9 style is to fix an IE8 bug. Thanks to web designer wall for this excellent tutorial on responsive design. Scroll down about half-way for the part about flexible images.

You can also make videos and other embedded objects dynamically resize with the same technique:

.video embed,
.video object,
.video iframe {
    width: 100%;
    height: auto;
}

Dynamically resizing image with max width

One problem with the CSS for flexible images is that you must specify 100% as the max-width. That means you can’t directly force a maximum size on the image tag itself. To accomplish this, just put it inside a containing element that does have a fixed max-width, for example:

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

This will render an image at exactly 500px, and scale down as the viewable browser window gets smaller and smaller.

That’s all there is to it! Just 2 CSS styles and a 3rd for an IE8 fix, and you’ve got images that will expand and contract in size as the containing element changes size.

11 Flares Twitter 1 Google+ 10 LinkedIn 0 Email -- 11 Flares ×
  • http://www.gabrielewebdesigner.it/ Gabriele D’Amato

    Thanks for the post. Very useful ;-)

  • RAVICHANDRAN NATARAJAN

    This one worked perfect to my requirement.

  • Ratty

    it isn’t work.. what do i do wrong?please help?

    img {
        max-width: 100%;
        min-width:100%;
        height: auto;
        width: auto9; /* ie8 */
    }

    Thx a lot

     

  • SophieT

    Thanks you so much !!!!!

  • Manav Misra

    Helpful tutorial. However, for the IE-bug fix,  I think you meant to use a forward slash (/), and not a backwards slash()…Like this:  width: auto/9; /* ie8 */

  • Manav Misra

    See comment above about making it say: width:auto/9 (use a forward slash ‘/’). Hope that helps.

  • Bill

    This is pretty cool.  Is there any way to get it to resize automatically with the window height as well, not just the width?

  • Norman Khine

    nice one, is it possible to use the same process for background images?
    for example, i have a div that has a background image, which i want to resize depending on the screen size.

    thanks

  • Norman Khine

    i just found it: background-size: 100% 100%;

  • Rafael Oliveira

    Just change max-width to max-height and width:100% to height:100%. Also don’t use , it causes the resizing to bug, don’t know why.

  • Mike

    oh crap I just skimmed this real quick and added it to my css and it worked. thanks.

  • http://profile.yahoo.com/3PBLF2URMNWI6J5YUS2IKKP5RA Robert

    Very nice thanks. Only thing it doesn’t work on is IE6 (on IE6 it always shows a very tiny image).

  • Happy Camper

    OMG thank you for this. I have been working all day to debug many things and this was the last thing I needed to do and it worked great!

  • Nadadesign

    thank you

  • Mogo-dot

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

    ..this isn’t working?
    how do i do this *cries*

  • Janice

    One issue i’ve found with using “width: auto9; /* ie8 */” is that IE seems to ignore the image size when explicitly written within the image tag….so for instance if i have an image which is 400 pixles wide but write it at a reduced width as the image still displays at 400 pixles wide in IE. If i remove the css “width: auto9; /* ie8 */” the image display as it should at 100px.
    Any way around this?

  • Matt

    Totally just made my day. Thanks!

  • Kamil

    Awesome

  • http://www.clippingpathindia.com Clipping Path

    Helpful for me.

  • Er1c S

    remove the px on an attribute or make it style=width: … the px is only used on CSS

  • Web D0rk

    your width is a FORWARD slash, it has to be a backslash.

  • tripping thru the tulips

    IE6… are you kidding? who cares *WHAT* IE6 users see, it is an unsafe browser and less then .5% (1 in 200) of the Internet is using it.

  • http://www.yepi250.com/ yepi

    Amazing work! You have great skills!

  • Derek

    This looks good. Yet to implement it, but wondering if there’s a way to combine it with the background: url property to actually load in a different image once the image is smaller. No point loading a massive image if it’ll be displayed small – maybe have different versions of the same image at different resolutions, and swap down to them as needed?

  • Nathan Govender

    How do you put a background image on an iframe to resize automatically. Will also want to name the iframe as a target name so i can display views from hyperlinks

  • http://www.colorexpertsbd.com/custom-image-manipulation-in-photoshop.html Photoshop Image manipulation

    Very useful post, Needed this some days ago..

  • http://raisingfor.blogspot.com/ Ninawardj

    cool. thanks !!!

  • Insatt

    Use an class on the img instead of an wrapper.= // .width50{ width:50%, height:auto;}

  • Anais Wall

    So simple and totally solved my problem with a dynamic Ghost theme. THANKS!

  • Dean

    It seems i can’t make it work inside a table.. Could anyone please assist me?

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

  • http://nathanaeljones.com/ Nathanael Jones

    Note that this doesn’t reduce the size of the image downloaded; meaning your phone will still get that 2MB image designed to handle a 30″ monitor. The good news is that web servers are 5,000 faster than you at image preparation. Drop a server-side component like imageresizing.net onto your website, and add Slimmage.js (1.5Kb) to your page, and those CSS rules you’ve written will end up controlling the dimensions of the image sent to the browser. Disclaimer, I’m the author of Slimmage.js and ImageResizer; but there are other, similar, solutions out there as well.

  • Luke

    I am having the same issues as Dean below. I am using it in a table. The code works great outside the table but inside I cannot figure it out – any ideas on how to fix it?