How to resize images for any resolution (or fluid layout) using CSS

Learn how to resize images for any resolution by simply using CSS

When I was creating this layout I wasn't really thinking of mobile devices. Actually I was only thinking about throwing something online as I wanted to start to write. As the days passed by I started to make some tests with Opera Mobile Emulator and I could see that my blog looked horrible in it. Few adjustments later and everything seemed fine.

Until I wrote this post.

The problem was: The images had naturally a fixed size which was bigger than their container. To solve this problem I could simply apply to the images the width of the container. But what about the mobile devices or different resolutions? [more]

The solution for that is very simple: Set the max-width as 90%.

#content article img { max-width:90%; }

In this case, the div #content and the element article (HTML5, anyone?) can have any width as the image will automatically resize until 90% of their size. It means that if the image would have less than 90% of the width it wouldn't be resized. The most important: The ratio doesn't change, as you can see on the print from the emulator bellow.

So, this is the perfect solution for my blog and also for websites where we can't have control of the images which will be uploaded.