在IE6中使用一个（CSS）尺寸缩放图像时如何保留宽高比？

这是问题。我有一个形象：

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

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

在某些页面上，我只想显示一个缩略图。我不能改变HTML，所以我使用下面的CSS：

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

哪个（在大多数浏览器中）制作了一个统一宽度的缩略图页面，并保留了长宽比。

在IE6中，图像仅在CSS中指定的尺寸中缩放。它保留了“自然”的高度。

下面是一对说明问题的页面的例子：

我会非常感谢所有的build议，但想指出（由于客户select平台的限制），我正在寻找一些不涉及修改HTML的东西。 CSS也会比JavaScript更受欢迎。

编辑：应该提到的图像是不同的大小和长宽比。

亚当·勒特（Adam Luter）给了我这个想法，但事实certificate这很简单：

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

IE6现在可以缩放图像，这似乎是所有其他浏览器默认使用的。

感谢两个答案虽然！

我很高兴解决了这个问题，所以我想你必须在IE6上明确设置'auto'才能模仿其他浏览器！

我最近还发现了另一种缩放图像的技术，也是为背景devise的。这种技术有一些有趣的特点：

标记依赖于一个包装元素：

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

鉴于上面的标记，然后使用这些规则：

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

如果你控制包装的大小，你会得到上面列出的有趣的尺度效果。

为了明确，请考虑以下基本状态：100×100的容器和10×10的图像。结果是100×100的缩放图像。

所以，换句话说，图像总是至less和容器一样大，但是为了保持高宽比，它的尺寸也会扩大。

这可能对您的网站没有用处，并且在IE6中不起作用。但是，为您的视图端口或容器获取缩放的背景是非常有用的。

那么，我可以想到一个CSS解决这个问题。

您可以在您的CSS文件中添加以下行：

 * html .blog_list div.postbody img { width:75px; height: SpecifyHeightHere; }

上面的代码只会被IE6看到。纵横比不会是完美的，但你可以使它看起来有点正常。如果你真的想使它完美，你需要写一些JavaScript来读取原始图片的宽度，并相应地设置比例来指定高度。

在CSS中进行显式缩放的唯一方法是使用诸如此处find的技巧。

只有IE6，你也可以使用filter（查看PNGFix ）。但是将它们自动应用到页面将需要JavaScript，尽pipe该JavaScript可以embedded在CSS文件中。

如果您要使用javascript，那么您可能只需要在内容加载完成后通过检查图像来填充缺less的高度值。（对不起，我没有这个技术的参考）。

最后，并请原谅我的这个肥皂箱，你可能想避免在这个问题上的IE6支持。你可以在width: 75px规则后加上_width: auto ，这样IE6至less可以合理地渲染图像，即使尺寸是错误的。

我build议最后的解决scheme，因为IE6正在出路：20％，每个月下降近一个百分点。另外，我注意到你的网站是娱乐性的，在英国。这两种方式都有助于人口精益远离IE6：IE6的使用量在周末下降了近40％（不引起抱歉），而英国的IE6人口统计（再次没有引用，对不起）。

祝你好运！