Fluid Images

by Ethan Marcotte

27 Reader Comments

Back to the Article
  1. ... brilliant! It seems I have to really get back learning the trade again. Thanks for this wonderful chapter. Must now get hold of the book.
    Copy & paste the code below to embed this comment.
  2. I dealt with a similar issue recently. Thought I should mention for IE7 and IE8 you can use the CSS property -ms-interpolation-mode:bicubic; Gives much nicer scaling of images for IE.  Used jQuery to cope with IE6’s lack of max-width.  Did not consider AlphaImageLoader, will have a look at this for making IE6 look better too.
    Copy & paste the code below to embed this comment.
  3. Luckily, I don’t work on projects that require IE6 compatibility any longer… From the YUI discussion it looks like the page takes a lot more ram to render…  like 700% more ram. In that case, I would just let them have poo-poo image resizing and put a message to upgrade.
    Copy & paste the code below to embed this comment.
  4. I build a personal template completely fluid and small javascript for make fluid the fonts-size and centering images (sorry for my english) Example: http://dl.dropbox.com/u/13739195/example.html
    Copy & paste the code below to embed this comment.
  5. I’m starting to develop a crush on code (blush).
    More awesome articles like this and I might (gulp) love to code.
    Copy & paste the code below to embed this comment.
  6. Firefox and Opera seem to ignore the max-width: 100% if there’s a right margin and a right sidebar with a negative left margin, yet webkit browsers respect the max-width: 100% even with a right sidebar. width: 100% fixes the problem, but increases the actual size of the image. Why doesn’t max-width: 100% work here? Is there a workaround for this?
    Copy & paste the code below to embed this comment.
  7. so claver way to make clean images,  thank you so much for sharing this information with us. =)
    Copy & paste the code below to embed this comment.
  8. I just learned a new way of keeping things clean. Great information.
    Copy & paste the code below to embed this comment.
  9. Thanks for the article. I very much enjoyed it. Great information. Thanks!
    Copy & paste the code below to embed this comment.
  10. On the faux column technique, why not just position bg at right?
    background: url(...) top right repeat-y;
    Copy & paste the code below to embed this comment.
  11. very importand life saving tutorial from List Apart, ı will try and share my results thanks
    Copy & paste the code below to embed this comment.
  12. If you want to avoid having that super-wide image from loading in modern browsers, you can replace it with a generated version, via the CSS3 ‘linear-gradient’ function. That would look like this (rounding the percentage because it’s easier to read):
    background: #F8F5F2 url(“blog-bg.png”) repeat-y 63.1% 0;
    background: -moz-linear-gradient(left, #ffffff 63.1%, #cccccc 63.1%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(63.1%,#ffffff), color-stop(63.1%,#cccccc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #ffffff 63.1%,#cccccc 63.1%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #ffffff 63.1%,#cccccc 63.1%); /* Opera11.10+ */
    background: -ms-linear-gradient(left, #ffffff 63.1%,#cccccc 63.1%); /* IE10+ */
    background: linear-gradient(left, #ffffff 63.1%,#cccccc 63.1%); /* W3C !!DRAFT!! */
    Copy & paste the code below to embed this comment.
  13. @oliveiraev: Because then you would always have a sidebar color that was 1107px wide. The author’s technique is not actually sizing the background image, it is just positioning it. So the image is still 300px wide, but 631111111111111% across the image will align with 631111111111111% across the background. That’s how percentages work in ‘background-position’.
    Copy & paste the code below to embed this comment.
  14. Sorry, I left out a decimal. That should have read “63.1111111111111% across the image will align with 63.1111111111111% across the background”.
    Copy & paste the code below to embed this comment.
  15. Hi, I really liked this article. I want to create a centralized page for tips and tricks of the web at http://www.thoughtresults.com/web-tips-and-tricks named Web Tips & Tricks. For the first tip, I included max-width property mentioned in this article.
    Copy & paste the code below to embed this comment.
  16. your sample is sure very nice coded, but what about the total page-weight? we all know that a important issue is the size and optimisation of images, and with this (extreme) difference in “displayed” image-size and “downloaded” image-size w’re wasting band-width, wich is allso time and therefor money.
    I realise that in your sample the difference is huge, but millions of images a day is what’s happening in my daily work, and I cannot permit myself to much of a band-width-waste.
    Copy & paste the code below to embed this comment.
  17. This seems like a great book and a very good read. I will have to look into this book. Isn’t it wonderful how a few little tweaks can completely clean up an image and make it look so much better. Images capture an audience and can make a website either good or bad. Little things like this can help do the trick. Thanks Tesmond for the comment I will definitly look into -ms-interpolation-mode:bicubic; so that IE images are smoother scaling.
    Copy & paste the code below to embed this comment.
  18. For some reason, perhaps because my images are inside link tags, the main browsers don’t keep the aspect ratio constant when resizing them: the height stays constant and the images distort. Using both width: 100% and height: 100% works to fix the aspect ratio in most browsers nicely, but sadly WebKit-based ones take the 100% to be the height of the browser window. This results in very tall narrow images… :(
    Copy & paste the code below to embed this comment.
  19. Why would you apply one background to what should be two divs (I’m talking about the blog example). The technique is interesting but I don’t really see the point. Each div should have it’s own background image.
    Copy & paste the code below to embed this comment.
  20. I really love responsible designs and have worked intensely on it for the last year or two. What is often forgotten is bandwidth and that perceived speed is very important for the overall experience of a website. Browser resizing with CSS is a necessity, but should in my opinion be considered a last resort. It’s quite interesting to work with context sensitive javascript queries changing the requested image url to a “thumbnail” version so that less bandwidth is used by the client.
    Copy & paste the code below to embed this comment.
  21. Of course, if you weren’t using an image to do the job of text, you wouldn’t have to worry about it looking like an arty fax (that is what you said, right?) and having to mess around with alphaimageloader. And if it gets resized too much, it will be too small to be legible, no matter what the quality of reproduction. Remember, images are pictures, not text. And while pictures might look slightly scrappy if resized in IE6, they will not be so broken that they’re unusable. When that happens, it’s usually a clue that you shouldn’t have been using an image there in the first place.
    Copy & paste the code below to embed this comment.
  22. I’m designing a fluid layout right now and this really helps a lot.  The background faux-column trick seems a bit strange though.  I wonder if there is a better way around this.
    Copy & paste the code below to embed this comment.
  23. Ok, now I think I have to get the book. It was so inspiring to see the alternatives to the standard ways we use in our everyday work. It’s time to get fluid ...
    Copy & paste the code below to embed this comment.
  24. Thought you might find useful: The problems that occur in ie. when rendering images at sizes other than their native size can be fixed in by adjusting the image interpolation method to ‘bicubic’ by using the following css: img { -ms-interpolation-mode: bicubic; } For more info see:
    http://css-tricks.com/2398-ie-fix-bicubic-scaling-for-images/ Hope this helps ....have fun p.s. great article
    Copy & paste the code below to embed this comment.
  25. Thanks for the great article! I can’t tell you how many times I’ve had to pair down an image in photoshop to get it to an appropriate dimension. It makes so much more sense for the applications out there today as well as the varying degree of browsers to approach image sizing like this. Allowing for changes in the proportions of screens as well as mobile devices’ ability to resize using fluid images is just plain smart. It certainly puts perspective on the way the web is developing not as a static medium but a highly interactive and dynamic tool. Sometimes it is confounding how such a simple principle is finally introduced to HTML and CSS and makes our lives so much easier. Not only do fluid images allow for a skip in the step between image editing software and the web, but creates a contextual image that will adapt to the screen. This aspect is so crucial for a time when the screen isn’t limited by certain dimensions. Also, just simply in the act of designing, the ability to easily resize the image in divs based on percentages is so helpful to navigate through the design on a more immediate and visual level.
    Copy & paste the code below to embed this comment.
  26. Fluid images go hand in hand with responsive design, with multiple widths per site depending upon the resolution of the screen and width of the browser window.  We have recently had a lot of interest is sites with this responsive design.
    Copy & paste the code below to embed this comment.
  27. Ethan thanks for the info on the rule. I can see using this max-width: 100% rule a lot. I wish IE6 & 7 supported it but I still love it too!
    Copy & paste the code below to embed this comment.