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

时间:2009-04-16 19:50:03

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

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

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

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

在某些网页上,我只想显示缩略图。我无法改变html,所以我使用以下CSS:

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

其中(在大多数浏览器中)制作了一个均匀宽缩略图的页面,所有缩略图都保留了宽高比。

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

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

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

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

4 个答案:

答案 0 :(得分:198)

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

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

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

感谢你们的答案!

答案 1 :(得分:14)

我很高兴这样做了,所以我猜你必须在IE6上明确设置'auto'才能模仿其他浏览器!

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

  1. 保留图像宽高比
  2. 维持图像的原始大小(即,它永远不会缩小,只会增长)
  3. 标记依赖于包装元素:

    <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。
    3. 因此,换句话说,图像始终至少与容器一样大,但会将扩展到以保持其宽高比。

      这可能对您的网站没有用,并且在IE6中不起作用。但是, 对于获取视口或容器的缩放背景非常有用。

答案 2 :(得分:2)

好吧,我可以想到一个可以解决这个问题的CSS黑客。

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

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

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

答案 3 :(得分:2)

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

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

如果您要求使用javascript,那么您可能希望通过在内容加载后检查图像来让javascript填充缺失的高度值。 (对不起,我没有这方面的参考资料)。

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

我推荐最后一个解决方案只是因为IE6正在出路:20%,几乎是percent a month。此外,我注意到您的网站是娱乐性的,在英国。这两个都有助于人口统计倾向于远离IE6:IE6的使用率在周末下降了近40%(没有引用对不起),而且英国的IE6人口数量低得多(再次没有引用,抱歉)。

祝你好运!