How to preserve aspect ratio when scaling image using one (CSS) dimension in IE6?

Question

Here\'s the problem. I have an image:

Note no height or width specified.

On certa

Answer 1

I'm glad that worked out, so I guess you had to explicitly set 'auto' on IE6 in order for it to mimic other browsers!

I actually recently found another technique for scaling images, again designed for backgrounds. This technique has some interesting features:

1. The image aspect ratio is preserved
2. The image's original size is maintained (that is, it can never shrink only grow)

The markup relies on a wrapper element:

Given the above markup you then use these rules:

#wrap {
  height: 100px;
  width: 100px;
}
#wrap img {
  min-height: 100%;
  min-width: 100%;
}

If you then control the size of wrapper you get the interesting scale effects that I list above.

To be explicit, consider the following base state: A container that is 100x100 and an image that is 10x10. The result is a scaled image of 100x100.

1. Starting at the base state, the container resized to 20x100, the image stays resized at 100x100.
2. Starting at the base state, the image is changed to 10x20, the image resizes to 100x200.

So, in other words, the image is always at least as big as the container, but will scale beyond it to maintain it's aspect ratio.

This probably isn't useful for your site, and it doesn't work in IE6. But, it is useful to get a scaled background for your view port or container.