Question

我正在开发一个新网站，http://blgz.co/，出于某种奇怪的原因，我的所有图片都被挤压了!!!!!我花了最后几个小时试图解决问题无济于事。任何帮助都会很棒！感谢。

Answer 1

无法弄清楚为什么要将max-width声明添加到全局img标记中。删除它，所有图像将正常流动：

img {
    height: auto;
    max-width: 100%; /* remove */
}

Answer 2

这是因为您max-width: 100%样式，您正在应用img标记。在你的情况下它只是23px，这是因为它的父.node .field-name-field-op-main-image有float: left，这意味着它将作为内联元素（但不会考虑你的图像的宽度或可能你设置你的图像宽度以后）。换句话说，删除float:left或max-width:100%，您将获得“所需”结果

Answer 3

我参加这个派对的时间已经很晚了，但我自己也遇到了这个问题，只是删除max-width或者没有浮动父元素不是选项。因此，我必须找到真正的解决方案：只需添加width:auto;，例如：

img {
    height: auto;
    width: auto;
    max-width: 100%;
}

具有讽刺意味的是，在每个浏览器但 Chrome 20中都运行得很好，然后开始表现为IE8。所以我使用CSS hack只针对IE8：

img {
    height: auto;
    width: auto\0/;
    max-width: 100%;
}

现在在每个人都吓坏了之前，我选择了一个CSS hack，因为我在Bootstrap CSS Framework的重置中做了这个特别的改变，它已经在其他地方使用了hacks。如果你想进入白帽路线，那么你可以简单地在你的HTML中添加一个条件评论：

<!--[if !IE 8]>
    <style type="text/css">
        img { width: auto; }
    </style>
<![endif]-->

还有一点需要注意，如果您在* .less文件中使用上面的hack，则必须将其转义，否则LESS编译器会阻塞它：

width: e('auto\0/');

Answer 4

在我的情况下出于某种原因，IE8不想服从明确的width: 46px; CSS。

修复：添加min-width: 46px;会强制IE8呈现正确的宽度，而不会破坏其他浏览器。

在IE8中查看时被压缩的图像

4 个答案: