最大高度流体图像响应在 Chrome、Firefox 等中不起作用，但在 Safari 中起作用答案

【问题标题】：Max-height fluid image responsive doesn't work in Chrome, Firefox etc. but works in Safari最大高度流体图像响应在 Chrome、Firefox 等中不起作用，但在 Safari 中起作用
【发布时间】：2015-02-05 11:04:09
【问题描述】：

我正在尝试为高度调整图像大小（我知道宽度：100％，高度：自动调整宽度）。以下设置适用于 Safari (~8.02) 但 Chrome 和 Firefox (最新) 根本不在乎。有任何想法吗？如果不存在 CSS hack，我对 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>

【问题讨论】：

标签： jquery html css google-chrome

【解决方案1】：

除了上面的 CSS，在容器（在本例中为 .block）上声明高度为 100% 解决了 Chrome 和 Firefox 上的问题。它现在符合预期的 Safari 行为。

【讨论】：

【解决方案2】：

您是否要在图像超过 80% 的高度后故意扭曲图像？看看这篇文章...Max-height ignored in Firefox, works in Chrome and Safari

【讨论】：

该解决方案在 Safari 中运行良好，但在 Chrome 中运行良好（更不用说 Firefox）。图像似乎没有失真，并且提供的链接使用的宽度小于 100%。如果您在 Safari 中查看，您会发现差异。

【解决方案3】：

除了上面的 CSS，在容器（在本例中为 .block）上声明高度为 100% 解决了 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>

【讨论】：