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

Question

Here s the problem  I have an image    lt img alt  alttext  src  filename jpg   gt    Note no height or width specified   On certain pages I want to only show a thumbnail  I can t alter the html  so I use the following CSS    blog list div postbody img   width 75px      Which  in most browsers  makes a page of uniformly wide thumbnails  all with preserved aspect ratios   In IE6 though  the image is only scaled in the dimension specified in the CSS  It retains the  natural  height   Here s an example of a pair of pages that illustrate the problem    The list  which should show thumbnails A single blog post  which shows the full-size image    I d be very grateful for all suggestions  but would like to point out that  due to the limitations of the clients chosen platform  I m looking for something that doesn t involve modifying the html  CSS would also be preferable to javascript   EDIT  Should mention that the images are of different sizes and aspect ratios

User · Answer

The only way to do explicit scaling in CSS is to use tricks such as found here.

IE6 only, you could also use filters (check out PNGFix). But applying them automatically to the page will need javascript, though that javascript could be embedded in the CSS file.

If you are going to require javascript, then you might want to just have javascript fill in the missing value for the height by inspecting the image once the content has loaded. (Sorry I do not have a reference for this technique).

Finally, and pardon me for this soapbox, you might want to eschew IE6 support in this matter. You could add _width: auto after your width: 75px rule, so that IE6 at least renders the image reasonably, even if it is the wrong size.

I recommend the last solution simply because IE6 is on the way out: 20% and going down almost a percent a month. Also, I note that your site is recreational and in the UK. Both of these help the demographic lean to be away from IE6: IE6 usage drops nearly 40% during weekends (no citation sorry), and UK has a much lower IE6 demographic (again no citation, sorry).

Good luck!

User · Answer

Adam Luter gave me the idea for this  but it actually turned out to be really simple   img     width   75px    height  auto      IE6 now scales the image fine and this seems to be what all the other browsers use by default   Thanks for both the answers though

User · Answer

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    The image aspect ratio is preserved The image s original size is maintained  that is  it can never shrink only grow    The markup relies on a wrapper element    lt div id  wrap  gt  lt img src  test png    gt  lt  div gt    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    Starting at the base state  the container resized to 20x100  the image stays resized at 100x100  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

User · Answer

Well  I can think of a CSS hack that will resolve this issue   You could add the following line in your CSS file     html  blog list div postbody img   width 75px  height  SpecifyHeightHere       The above code will only be seen by IE6  The aspect ratio won t be perfect  but you could make it look somewhat normal  If you really wanted to make it perfect  you would need to write some javascript that would read the original picture width  and set the ratio accordingly to specify a height

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

Examples related to javascript

Examples related to css

Examples related to internet-explorer

Examples related to image

Examples related to internet-explorer-6