Thursday, 3 March 2011

Setting a maximum image height or width using max-wdth and max-height

I've been building a simple image library for a content management system and part of it requires the listing of images with thumbnails displayed. The image dimensions are highly variable, and so I needed to some way to display the image at its natural size and aspect ratio, but to limit both dimensions so large images couldn't upset the way the list appears.

I used this style setting at the top of my page, imposing the limits on all <img> elements. Naturally this could be made more specific, but this suited me fine.

img {
max-width: 100px;
max-height: 100px;
/* Resize the image for IE6 */
width: expression(this.width > 100 ? 100: true);
height: expression(this.height > 100 ? 100: true);

No comments:

Post a Comment

Comments are moderated, so you'll have to wait a little bit before they appear!