最大高度流畅的图像响应功能不适用于Chrome，Firefox等，但适用于Safari

Question

我正在尝试完成图像的高度调整（我知道width：100％，height：auto来调整宽度）。 以下设置可在Safari（〜8.02）中使用，但Chrome和Firefox（最新）完全不在乎。 有任何想法吗？ 如果没有CSS hacks，我愿意接受jQuery解决方案。

 body, html { width:100%; height:100%; } body { background: lightgreen; } .full { width:100%; } .block { background: lightcoral; width: 80%; text-align: center; position: absolute; } .logo { max-width: 100%; max-height: 80%; } 

 <div class="full"> <div class="block"> <img src="http://placehold.it/709x534" class="logo"> </div> </div> 

Answer 1

除了上述CSS外，在容器上声明高度为100％（在这种情况下为.block）可以解决Chrome和Firefox上的问题。 现在，它符合预期的Safari行为。

Answer 2

在图像高度超过80％之后，您是否要故意使图像失真？ 看看这篇文章... Firefox中忽略的最大高度，可在Chrome和Safari中使用

Answer 3

除了上述CSS外，在容器上声明高度为100％（在这种情况下为.block）可以解决Chrome和Firefox上的问题。 现在，它符合预期的Safari行为：

 body, html { width:100%; height:100%; } body { background: lightgreen; } .full { width:100%; } .block { background: lightcoral; width: 80%; text-align: center; position: absolute; height: 100%; } .logo { max-width: 100%; max-height: 80%; } 

 <div class="full"> <div class="block"> <img src="http://placehold.it/709x534" class="logo"> </div> </div>