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

Question

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

应将（此）图像宽度设置为175px，将高度设置为220px。它在Firefox和Internet Explorer中流畅地工作，但在Chrome（台式机，平板电脑和智能手机）中，它将高度设置为220px，但宽度（！）也设置为220px。为什么会这样，这是Chrome中的某种错误，或者我在这里错过了什么。

奇怪的是，如果你将删除高度：100％部分所以你只剩下最大高度：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小提琴示例

Answer 1

接下来的事情：

如果使用检查器工具，则浏览器正在添加width:auto;，因为未声明宽度规则。我已经研究了一下，我找不到任何理由为什么，但它归结为Chrome和Firefox计算＆＃34; width：auto＆＃34;不同。 Firefox正在根据比例进行计算，Chrome正在显示本机。

我已经检查了CSS2.1宽度规范，因为我们讨论的是内联图像，所以我们需要检查大量条件。我认为适用的是：

  

否则，如果＆＃39;宽度＆＃39;计算值为＆＃39; auto＆＃39;和元素   具有固有宽度，然后该固有宽度是使用的值   ＆＃39;宽度＆＃39;

     

来源 - 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，然后移除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;
}

工作演示：

Answer 2

您无需添加height，仅设置max-height

DEMO

img {
    max-height:220px;
}

Answer 3

设置max-width并修复Chrome中的问题：

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

演示：http://jsfiddle.net/be5jT/2/