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

92

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

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

注意未指定高度或宽度。

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

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

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

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

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

对于所有建议，我将非常感谢，但是我想指出一下（由于所选平台的客户端的局限性），我正在寻找不涉及修改html的内容。CSS也比javascript更可取。

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

— 汤姆·赖特
source

我正在记录各种错误。我无法重现此。您认为您可以对此做一个简单的测试用例吗？

— meder omuraliev

老实说，我不再做很多网页设计，而且我不确定在哪里可以找到没有麻烦的IE6安装。我会做广告。

— 汤姆·赖特

197

亚当·卢特（Adam Luter）给了我这个主意，但实际上却很简单：

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

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

谢谢你的两个答案！

— 汤姆·赖特
source

2

我还建议使用：“对象适合：包含；” 或“对象适合：填充；” 如果这还不足以满足您的需求

— Magnus

5

根据caniuse.com的@Magnus（在撰写本文时），当前任何浏览器均不支持CSS3对象适合，而Opera仅支持。它几乎不会在IE6中工作。

— 理查德·豪尔

这也应该反过来解决吗？（即，设置高度，自动宽度？）这适用于旧的IE吗？

— josinalvo

14

我很高兴能解决这个问题，因此我想您必须在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中不起作用。但是，它是获得规模的背景为您的视口或容器是有益的。

— 亚当·卢特
source

3

如果您想将DOWN图片缩小到具有长宽比保留的容器中，它似乎是max-height和max-width而不是min-height / min-width，它们似乎可以放大较小的图片。

— 卡斯滕

我喜欢这个答案，@ Karsten对最大高度和最大宽度很满意。

— Ramsharan

2

好吧，我能想到可以解决此问题的CSS hack。

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

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

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

— g
source

2

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

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

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

最后，请原谅我这个肥皂盒，您可能希望在此问题上避免IE6支持。您可以_width: auto在width: 75px规则之后添加，以便IE6至少合理地渲染图像，即使尺寸错误也是如此。

我之所以推荐最后一个解决方案，仅是因为IE6即将淘汰：20％且每月下降近一个百分点。另外，我注意到您的网站是在英国休闲娱乐。这两种方法都有助于使人口统计信息趋向于远离IE6：在周末，IE6的使用率下降了近40％（对不起引用，对不起），英国的IE6人口统计要低得多（对不起，也没有引用对不起）。

祝好运！

— 亚当·卢特
source