在IE6中使用一个(CSS)维度缩放图像时如何保持纵横比？

Question

这是问题所在.我有一张图片:

<img alt="alttext" src="filename.jpg"/>

注意没有指定高度或宽度.

在某些页面上,我只想显示缩略图.我无法改变html,所以我使用以下CSS:

.blog_list div.postbody img { width:75px; }

其中(在大多数浏览器中)制作了一个宽幅缩略图的页面,所有缩略图都具有保留的宽高比.

但是在IE6中,图像仅在CSS中指定的维度中缩放.它保留了"自然"的高度.

以下是一对说明问题的页面示例:

• 列表,应显示缩略图
• 一篇博文,显示全尺寸图片.

我非常感谢所有的建议,但是想指出(由于客户选择平台的局限性)我正在寻找一些不涉及修改html的东西.CSS也比javascript更好.

编辑:应该提到图像具有不同的大小和宽高比.

Answer 1

Adam Luter给了我这个想法,但事实证明它非常简单:

img {
  width:  75px;
  height: auto;
}

IE6现在可以很好地缩放图像,这似乎是所有其他浏览器默认使用的.

谢谢你们的答案!

Answer 2

我很高兴这样做了,所以我猜你必须在IE6上明确设置'auto'才能模仿其他浏览器!

我实际上最近发现了另一种缩放图像的技术,同样是为背景设计的.这种技术有一些有趣的特点:

1. 保留图像宽高比
2. 保持图像的原始大小(也就是说,它永远不会缩小,只会增长)

标记依赖于包装元素:

<div id="wrap"><img src="test.png" /></div>

鉴于上述标记,您可以使用以下规则:

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

如果你然后控制包装器的大小,你会得到我上面列出的有趣的缩放效果.

要明确,请考虑以下基本状态:100x100的容器和10x10的图像.结果是100x100的缩放图像.

1. 从基本状态开始,容器调整为20x100,图像保持调整大小为100x100.
2. 从基本状态开始,图像变为10x20,图像调整为100x200.

因此,换句话说,图像始终至少与容器一样大,但会超出它以保持其纵横比.

这可能对您的站点没有用,并且在IE6中不起作用.但是,它是获得规模的背景为您的视口或容器是有益的.