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

Question

我已经设置了一个图像，其 css 设置为 220 像素的最大高度和 100% 的高度。

应该将(此)图像宽度设置为 175 像素，将高度设置为 220 像素。它在 Firefox 和 Internet Explorer 中运行流畅，但在 Chrome(台式机、平板电脑和智能手机)中，它将高度设置为 220px，但宽度(!)也设置为 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 示例

Answer 1

发生了什么:

如果您使用检查器工具，浏览器会添加 width:auto;，因为没有声明宽度规则。我进行了一些研究，但找不到任何原因来解释为什么，但事实是 Chrome 和 Firefox 计算“width:auto”的方式不同。 Firefox 是按比例计算，Chrome 是原生显示。

我检查了 CSS2.1 宽度规范，由于我们讨论的是内联图像，因此我们需要检查大量条件。我认为适用于此的是:

Otherwise, if 'width' has a computed value of 'auto', and the element has an intrinsic width, then that intrinsic width is the used value of 'width'.

Source - http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width

如果我没看错，这意味着 Chrome 在技术上是正确的，即使 Firefox 的方法最终看起来更好。

替代修复方法:

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

代码:

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

工作演示: