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

【问题标题】：How to preserve aspect ratio when scaling image using one (CSS) dimension in IE6?在 IE6 中使用一维 (CSS) 缩放图像时如何保持纵横比？
【发布时间】：2010-10-19 22:58:16
【问题描述】：

这就是问题所在。我有一张图片：

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

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

在某些页面上，我只想显示缩略图。我无法更改 html，所以我使用以下 CSS：

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

这（在大多数浏览器中）使页面具有统一宽度的缩略图，所有这些都具有保留的纵横比。

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

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

我非常感谢所有建议，但我想指出（由于客户选择平台的限制）我正在寻找不涉及修改 html 的东西。 CSS 也比 javascript 更可取。

编辑：应该提到图像的大小和纵横比不同。

【问题讨论】：

我正在记录各种错误。我无法复制这个。你认为你可以为此做一个简单的测试用例吗？
老实说，我不再做很多网页设计工作，而且我不确定在哪里可以找到没有麻烦的 IE6 安装。不过我会做广告的。

标签： javascript css internet-explorer image internet-explorer-6

【解决方案1】：

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

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

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

感谢您的回答！

【讨论】：

我还建议使用：“object-fit: contains;”或“对象拟合：填充；”如果这对你来说还不够
@Magnus 根据caniuse.com CSS3 object-fit 不受任何当前浏览器支持（在撰写本文时），并且仅受 Opera 支持。它几乎无法在 IE6 中工作。
这也应该反过来工作吗？（即，设置高度、自动宽度？）这适用于旧 IE 吗？

【解决方案2】：

我很高兴这成功了，所以我猜你必须在 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 中不起作用。但是，为您的视口或容器获取缩放背景很有用。

【讨论】：

如果你想缩小图像到一个保留纵横比的容器中，它似乎是最大高度和最大宽度而不是最小高度/最小宽度，这似乎可以缩放更小的图像起来。
我喜欢这个答案，@Karsten 对最大高度和最大宽度非常满意。

【解决方案3】：

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

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

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

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

【讨论】：

【解决方案4】：

在 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 人口要低得多（再次没有引用，抱歉）。

祝你好运！

【讨论】：