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'才能模仿其他浏览器！

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

标记依赖于包装元素：

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

鉴于上述标记，您可以使用以下规则：

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

如果您随后控制包装器的大小，您将获得我上面列出的有趣缩放效果。

要明确，请考虑以下基本状态：容量为100x100且图像为10x10。结果是100x100的缩放图像。

因此，换句话说，图像始终至少与容器一样大，但会将扩展到以保持其宽高比。

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

Answer 3

好吧，我可以想到一个可以解决这个问题的CSS黑客。

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

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

以上代码仅供IE6使用。宽高比不会很完美，但你可以让它看起来有些正常。如果你真的想让它变得完美，你需要写一些能够读取原始图片宽度的javascript，并相应地设置比例以指定高度。

Answer 4

在CSS中进行显式缩放的唯一方法是使用找到的here等技巧。

仅限IE6，您也可以使用过滤器（查看PNGFix）。但是将它们自动应用到页面将需要javascript，尽管javascript可以嵌入到CSS文件中。

如果您要求使用javascript，那么您可能希望通过在内容加载后检查图像来让javascript填充缺失的高度值。（对不起，我没有这方面的参考资料）。

最后，请原谅我这个肥皂盒，你可能想避免在这件事情上支持IE6。您可以在_width: auto规则之后添加width: 75px，这样IE6至少可以合理地呈现图像，即使它的大小错误。

我推荐最后一个解决方案只是因为IE6正在出路：20％，几乎是percent a month。此外，我注意到您的网站是娱乐性的，在英国。这两个都有助于人口统计倾向于远离IE6：IE6的使用率在周末下降了近40％（没有引用对不起），而且英国的IE6人口数量低得多（再次没有引用，抱歉）。

祝你好运！