在 IE6 中使用一个 (CSS) 维度缩放图像时如何保持纵横比? [英] How to preserve aspect ratio when scaling image using one (CSS) dimension in IE6?
问题描述
问题来了.我有一张图片:
Here's the problem. I have an image:
<img alt="alttext" src="filename.jpg"/>
注意没有指定高度或宽度.
Note no height or width specified.
在某些页面上，我只想显示缩略图.我无法更改 html，因此我使用以下 CSS:
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.
但在 IE6 中，图像仅按 CSS 中指定的尺寸进行缩放.它保留了自然"的高度.
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:
我非常感谢所有建议，但想指出(由于客户选择平台的限制)我正在寻找不涉及修改 html 的内容.CSS 也比 javascript 更可取.
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.
应该提到图像具有不同的尺寸和纵横比.
Should mention that the images are of different sizes and aspect ratios.
推荐答案
Adam Luter 给了我这个想法，但实际上它非常简单:
Adam Luter gave me the idea for this, but it actually turned out to be really simple:
img {
width: 75px;
height: auto;
}
IE6 现在可以很好地缩放图像，这似乎是所有其他浏览器默认使用的.
IE6 now scales the image fine and this seems to be what all the other browsers use by default.
谢谢两位的回答！
这篇关于在 IE6 中使用一个 (CSS) 维度缩放图像时如何保持纵横比?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
