这是问题所在。我有一张图片:
<img alt="alttext" src="filename.jpg"/>
注意没有指定高度或宽度。
在某些网页上,我只想显示缩略图。我无法改变html,所以我使用以下CSS:
.blog_list div.postbody img { width:75px; }
其中(在大多数浏览器中)制作了一个均匀宽缩略图的页面,所有缩略图都保留了宽高比。
但是在IE6中,图像仅在CSS中指定的维度中缩放。它保持了“自然”的高度。
以下是一对说明问题的页面示例:
我非常感谢所有建议,但是想指出(由于客户选择平台的限制)我正在寻找一些不涉及修改html的东西。 CSS也比javascript更好。
编辑:应该提到图像具有不同的大小和宽高比。
答案 0 :(得分:198)
Adam Luter给了我这个想法,但事实证明它非常简单:
img {
width: 75px;
height: auto;
}
IE6现在可以很好地缩放图像,这似乎是所有其他浏览器默认使用的。
感谢你们的答案!
答案 1 :(得分:14)
我很高兴这样做了,所以我猜你必须在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的缩放图像。
因此,换句话说,图像始终至少与容器一样大,但会将扩展到以保持其宽高比。
这可能对您的网站没有用,并且在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人口数量低得多(再次没有引用,抱歉)。
祝你好运!