首页 文章

如何在IE6中使用一个（CSS）维度缩放图像时保留纵横比？

提问于
浏览 次
92

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

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

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

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

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

其中（在大多数浏览器中）创建一个具有均匀宽缩略图的页面，所有缩略图都具有保留的宽高比 .

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

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

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

编辑：应该提到图像具有不同的大小和宽高比 .

javascript css internet-explorer image internet-explorer-6

4 回答

  • 198

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

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

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

    谢谢你们的答案！

    回复于
  • 2

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

    祝好运！

    回复于
  • 14

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

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

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

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

    回复于
  • 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的缩放图像 .

    • 从基本状态开始，容器调整为20x100，图像保持调整大小为100x100 .

    • 从基本状态开始，图像更改为10x20，图像调整为100x200 .

    因此，换句话说，图像始终至少与容器一样大，但会超出它以保持其纵横比 .

    这可能不适用于IE6 . 但是，为视图端口或容器获取缩放后台非常有用 .

    回复于

相关问题