我正在制作一个新网站,http://blgz.co/,但是出现了奇怪的问题——所有图片都变形啦!我已经尝试了几个小时,但是仍然无法解决。希望得到帮助!谢谢。
img {
height: auto;
max-width: 100%; /* remove */
}
max-width: 100%
样式应用于img
标记。在你的情况下,它只有23px,这是因为其父元素.node .field-name-field-op-main-image
具有float: left
,这意味着它将充当内联元素(但不会考虑图像宽度或可能稍后设置图像宽度)。float:left
或max-width:100%
中的任何一个,即可获得“期望”的结果。我有些晚来参加这个聚会,但我也遇到了这个问题,只是删除 max-width
或者不浮动父元素都不是选项。因此,我不得不找到一个真正的解决方案:只需要添加 width:auto;
,例如:
img {
height: auto;
width: auto;
max-width: 100%;
}
具有讽刺意味的是,在除了Chrome 20之外的所有浏览器中都运行良好,而Chrome 20开始表现得像IE8一样。因此,我采用了一个CSS hack来仅针对IE8:
img {
height: auto;
width: auto\0/;
max-width: 100%;
}
在所有人惊慌之前,我选择了一种CSS hack,因为我正在对Bootstrap CSS框架的重置进行此特定更改,该框架已经在其他地方使用了hack。如果您想采用白帽子方法,那么可以在HTML中简单地添加条件注释:
<!--[if !IE 8]>
<style type="text/css">
img { width: auto; }
</style>
<![endif]-->
还有一点需要注意,如果您在*.less文件中使用上述hack,您需要对其进行转义,否则LESS编译器将无法处理它:
width: e('auto\0/');
width: 46px;
CSS。min-width: 46px;
可以强制IE8渲染正确的宽度,而不会破坏其他浏览器。