RSS

Flexible Images

by mrqwest

Over the past few months, whilst building client and personal sites, I’ve started adding width:100%; to my image selectors so that any images will resize to fit within its parent. It worked great from the limited tests I ran so I stuck with it. It was only at the tail end of December whilst I was writing a custom style sheet for Google Reader did I realise an issue with using width:100%;.

Our current example page we’ve been working with shows the main content area at approximately 39em (or 624px) in width (it’s 65% of 60em which is the equivelent to 960px). If we inserted an image with a width of 800px, it’d reduce down to fit within the 624px parent. Resize your browser, and the image resizes with it.

Nice!

But if you inserted in an image with only a 300px width, the browser would enlarge the image to fit the parent by making the image almost 210% larger. As you can imagine, this looks pretty pixelated… and pretty bad!

Then I read about using max-width:100%; instead of the regular ‘width‘ property. Using max-width still allows the image to shrink down along with the parent element so it’ll fit your layout regardless of what device you’re using but it won’t go above 100% width of the original image.

So going back to the previous example of the 300px image, using max-width would mean it’ll shrink down to suit the layout on mobile devices but it won’t actually increase above 300px in width!

Fantastic – however there’s one more thing we need to deal with and that’s the height of the image; But it’s actually quite easy. Setting your height to auto always helps the aspect ratio.

Here’s what I’ve added to the stylesheet

.content img {
max-width:100%;
height:auto;
}

and here is Example Four which shows an image of a coffee cup (I like coffee!) – resize your browser and watch the image respond to it’s changing viewport.

9 Responses to “Flexible Images”

  1. bripkens - January 16th, 2012 at 06:33

    Wouldn’t this require the browser to load the image from the server before starting to render the page?

  2. mrqwest - January 16th, 2012 at 07:59

    That’s actually a very good point and something I should have noted previously. This just loads the full-size image and then shrinks it down on the client side. I’m sure there are ways of swapping out the image URL dependant on device size but that involves browser sniffing and (mostly) relies on javascript.

    Saying that, I will look into the different options and post again.

  3. Simon - January 16th, 2012 at 08:29

    Nice!
    Would you actually want to resize all images on your server for those ‘smaller-screen users’ !?
    If so, you might want to check out CSS Media Queries. No JavaScript involved.

    http://css-tricks.com/css-media-queries/

  4. Seth - January 16th, 2012 at 09:05

    Nice clear write-up.

    The only thing I would add myself is to note that <IE7 doesn't understand max-width, in which case width: is a sensible fallback. However, if you use respond.js that isn't required.

    Unfortunately, IE makes a pigs ear of image resizing (http://code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/) but you can fix that with the addition of:

    -ms-interpolation-mode: bicubic;

  5. Seth - January 16th, 2012 at 09:10

    The best, mobile-first, device aware image replacement solution that I have seen is Adaptive Images:

    http://adaptive-images.com/

    I like it because it is device agnostic and requires no changes in your markup. I use a CMS (Joomla) anyway, so the caveats about using a PHP script and .htaccess are no issue to me; I am doing that anyway.

  6. aprillins - January 16th, 2012 at 09:51

    SO, COOL! But, I don’t understand why the sidebar changes its position to under the article when I try to size down the font size like this http://i39.tinypic.com/wspf9u.jpg. Again, it’s Firefox 9.0.1….. What’s wrong with my Firefox..

  7. Chris - January 18th, 2012 at 15:26

    Nice post! I’ve been working with dynamically resized images for a recent build and have implemented a similar approach to what you have posted here. The one thing I’m struggling with is CSS backgrounds. In modern web design we use CSS backgrounds often but by making the widths and such dynamic this wreaks havoc with CSS backgrounds (depending on the image used) especially if they don’t repeat.

    I’ve been doing research on being able to dynamically resizing CSS backgrounds but have yet to find an approach I’m happy with.

  8. Simonas - January 21st, 2012 at 20:53

    @bripkens,
    No, most web-safe images formats has their size encoded in first 24 bytes of image with notable exception for JPEG, which may contain it’s size in nearly any part of header. Size of JPEG header vary according to image tags, like EXIF.

  9. Alphonse - May 14th, 2012 at 20:09

    I tried out

    http://adaptive-images.com/

    without changing nothing. Paths are correct, I even increased resolutions breakpoint to support also 320 and 128 resolutions for old mobile phones.

    But this simply don’t work. Images for example 520px wide don’t resize at all. The cache folder remains empty. Everything is supported on the server and where there are not .htaccess errors (directives also fully supported).

    Maybe the change is only visible on actual mobile screens? Or maybe there is still something to do with css on image declarations? Maybe should I specify relative image width? (I removed absolute ones)