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

IT技术 javascript css internet-explorer image internet-explorer-6
2021-02-25 13:15:55

这就是问题所在。我有一个图像:

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

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

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

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

这(在大多数浏览器中)制作了一个宽度一致的缩略图页面,所有缩略图都保留了纵横比。

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

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

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

编辑:应该提到图像具有不同的尺寸和纵横比。

4个回答

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

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

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

谢谢两位的回答!

这也应该反过来工作吗?(即,设置高度,自动宽度?)这适用于旧的 IE 吗?
2021-05-10 13:15:55
@Magnus根据caniuse.com CSS3的对象配合不被任何当前浏览器(在写作的时候)的支持,并仅有史以来歌剧支持。它很难在 IE6 中工作。
2021-05-12 13:15:55
我还建议使用:“对象适合:包含;” 或“对象适合:填充;” 如果这对你来说还不够
2021-05-19 13:15:55

我很高兴这成功了,所以我猜你必须在 IE6 上显式设置“自动”才能让它模仿其他浏览器!

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

  1. 图像纵横比被保留
  2. 图像的原始大小保持不变(即永远不会缩小只会增长)

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

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

鉴于上述标记,您可以使用以下规则:

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

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

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

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

因此,换句话说,图像始终至少与容器一样大,但会扩展容器之外以保持其纵横比。

这可能对您的站点没有用,并且在 IE6 中不起作用。但是,它获得规模的背景为您的视口或容器是有益的。

我喜欢这个答案,@Karsten 对 max-height 和 max-width 非常了解。
2021-05-01 13:15:55
如果您想将图像缩小到具有保留纵横比的容器中,它似乎是 max-height 和 max-width 而不是 min-height/min-width,这似乎可以放大较小的图像。
2021-05-19 13:15:55

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

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

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

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

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

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

如果您将需要 javascript,那么您可能希望在内容加载后通过检查图像来让 javascript 填充高度的缺失值。(抱歉,我没有此技术的参考资料)。

最后,请原谅我使用这个肥皂盒,您可能想在这件事上避开 IE6 支持。你可以_width: auto在你的width: 75px规则之后添加,这样 IE6 至少可以合理地渲染图像,即使它的大小不正确。

我推荐最后一个解决方案只是因为 IE6 即将淘汰:20% 并且每月下降近 1 %另外,我注意到您的网站是娱乐性的,并且在英国。这两者都有助于人们远离 IE6:周末 IE6 的使用率下降了近 40%(抱歉没有引用),而英国的 IE6 人口统计数据要低得多(再次没有引用,抱歉)。

祝你好运!