html - 最大高度属性会使图像在chrome中不成比例地变宽？

我已将css设置为最大高度为220px和高度为100％的图像。

这应将(此)图像宽度设置为175px，高度设置为220px。它可以在Firefox和Internet Explorer中流畅地工作，但是在Chrome(台式机，平板电脑和智能手机)中，它可以将高度设置为220px，但是将width(!)设置为220px。为什么会这样，是Chrome中的某种错误，还是我在这里缺少？

奇怪的是，如果您将height:100％的部分删除，则只剩下max-height:220px，就不会出现此问题。

请参阅下面的更详细的示例

figure {
    width: 100%;
    max-height: 220px;
}

a {
    width: 100%;
    display: inline-block;
    text-align: center;
}

img {
    height: 100%;
    max-height:220px;
}

http://jsfiddle.net/be5jT/ JS fiddle 示例

最佳答案

这是怎么回事:

如果使用检查器工具，则浏览器将添加width:auto;，因为未声明宽度规则。我已经进行了一些研究，但找不到任何原因，但这是因为Chrome和Firefox计算“width:auto”的方式有所不同。 Firefox基于比例进行计算，而Chrome显示 native 。



我已经检查了CSS2.1 Width规范，并且由于我们正在谈论的是嵌入式图像，因此我们有很多条件需要检查。我认为这里适用的是:



如果我没看错的话，即使Firefox的方法看起来看起来更好，但从技术上讲Chrome还是正确的。

替代修复方法:

lili2311的答案会起作用，但是您必须声明宽度，这意味着您必须使用相同比例的图像。您还可以删除已经知道的height:``00%。第三种方法是给a一个height:100%，将max-height:220px更改为height:220px上的figure，然后从max-height中删除img。这样一来，您只需声明一次220px。

代码:

figure {
    width: 100%;
    height: 220px;
}
a {
    width: 100%;
    height:100%;
    display: inline-block;
    text-align: center;
}
img {
    height: 100%;
    width:auto;
}

工作演示:

关于html - 最大高度属性会使图像在chrome中不成比例地变宽？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24996392/