In a css layout of a webpage where the whole site is created using em, images often ends up “destroying” the layout when a user increases or decreases the text-size. This can easily be fixed by a simple cms trick.

     <img class="list-image" src="/path-to-your-image.jpg" width="100" height="200" />

If you want the image to scale coherently to the em size, do the following:

. list-image {
      width: 10em !important;
      height: 20em !important;
}

Tags: CSS, image, tip

This entry was posted on Friday, October 30th, 2009 at 15:35 and is filed under Miscellaneous. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.