CSS fluid images in percentages

In order to create fluid CSS images in percentages, you need two steps:

1. turn the image into a block-level element
2. specifiy a width in percentages

Some examples:

#extra {width: 200px;}
#extra img {
  display: block;
  width: 100%;
}

ul li div {width: 25%;}
ul li div img {
  display: block;
  width: 100%;
}

There are a few drawbacks with these approach. First, either if you choose to use a fixed width or a fluid one on the image container, the overall width of the image should be always greater than or equal to the overall width of its container. Why? Because an image has always an intrinsic ratio between its width and height, so if you want to preserve a good image quality, you need to have an image whose width should be always proportional to the width of its container.

In other words, if you use a smaller image, the browser will display a distorted image. Second, you cannot preserve the intrinsic ratio of an image through CSS. CSS is not Photoshop, so you should always be aware of that. Third, since browsers always calculate percentage lengths by turning them into pixels, you should always take this aspect into account while using percentages (either on the image container or on the image itself).