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

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

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

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

感谢您的两个答案！

---

我很高兴这成功了，所以我猜你必须在 IE6 上明确设置“自动”才能模仿其他浏览器！

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

图像纵横比保持图像的原始大小保持不变（即永远不会缩小只会增长）

标记依赖于包装元素：

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

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

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

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

明确地说，考虑以下基本状态：一个 100x100 的容器和一个 10x10 的图像。结果是 100x100 的缩放图像。

从基本状态开始，容器调整为 20x100，图像保持调整为 100x100。从基本状态开始，图像更改为 10x20，图像大小调整为 100x200。

所以，换句话说，图像总是至少和容器一样大，但会超出它以保持它的纵横比。

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

---

好吧，我可以想到一个 CSS hack 来解决这个问题。

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

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

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

---

在 CSS 中进行显式缩放的唯一方法是使用诸如 found here 之类的技巧。

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

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

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

我推荐最后一个解决方案只是因为 IE6 即将淘汰：20% 并且几乎下降了 percent a month。另外，我注意到您的网站是娱乐性的，并且位于英国。这两者都有助于人口远离 IE6：IE6 的使用在周末下降了近 40%（抱歉没有引用），而英国的 IE6 人口要低得多（再次没有引用，抱歉）。

祝你好运！

---