html - 让 flexbox 中的图像填充所有垂直空间并保持完全可见

Question

我需要在 div 的左侧有一个图像，并且图像:

• 与 div 高度相同(它本身具有非固定的、依赖于内容的高度)；
• 完全可见；
• 保持其纵横比。

Flexbox 似乎非常适合这项工作，但当将图像设置为 100% 高度时，其尺寸保持自然宽度并且内容溢出到 div 下。请参阅下面的代码段:

.container {
  display: inline-flex;
  background-color: green;
}

.image {
  flex: 0 0 auto;
  background-color: purple;
}

.image img {
  display: block;
  height: 100%;
}

.right {
  flex: 1 1 auto;
  width: 100px;
  height: 100px;
  background-color: yellow;
}

<div class="container">
  <div class="image">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABOUlEQVRYhc2XPW6DQBCFP6bJEeLOMhKdS3dukOhT5FAcIAdJYfkKruzSnQvjCvsGSTUpdpEilMAiA7NPetXCvMfPzr5JlGBkwBbYAGtgBbz6tQdwBc7ACTgAl6Cq2s9c4UOhUtBAVv6evK9+12KqUCrUA4TbrH2NdKiBQmH/hHCbe18zyMCbwnFE8YZHX7vTQDGR+G8TxX8G0pFfe9fnSP8yUM4g3rBsG8j1ub99KGuvifh28A4sghrHOFh4TVDIdFiTGYuVQia49rqc8ekbLIGt4Hq7FTaCO1issBbcqWaFVaLwBbwYGfiW/mumheDChBUegksyVrgKLkZZ4Sy4DGeFk+AC5M1A/AYcBJdedwYGdsCl2YafwH1G8bvXjCeQRBHJzENpFLE8isEkitFstuE00fC9O8l4/gNz0YYudsoRxwAAAABJRU5ErkJggg==">
  </div>
  <div class="right">right div</div>
</div>

红色圆圈被剪掉了，但我希望它完全可见，如下所示:

我曾尝试将图像放在它自己的 div 中并尝试各种溢出值但没有成功。当使用开发工具禁用然后启用 img 元素上的 height: 100% 时，Chrome 最终会正确显示它，但这在 Firefox 中不会发生。

Answer 1

这在某种程度上是不可能的，因为浏览器至少需要两次迭代才能正确计算最终宽度，这可能会产生一个循环。基本上浏览器将首先忽略图像的百分比高度以设置容器的宽度/高度然后将解析百分比高度然后计算图像的宽度以保持比例但它不会返回调整再次调整容器的宽度，因为在某些情况下它可能会导致无限循环，这就是为什么您只会溢出。

这是一个仅适用于 Chrome 的 hack，您可以在其中通过应用动画强制再次计算宽度。

.container {
  display: inline-flex;
  background-color: green;
}

.image {
  background-color: purple;
}

.image img {
  display: block;
  height: 100%;
  animation:hack 1s infinite linear;
}

.right {
  width: 100px;
  height: 100px;
  background-color: yellow;
}

@keyframes hack {
  to {
    height:99.9%;
  }
}

<div class="container">
  <div class="image">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABOUlEQVRYhc2XPW6DQBCFP6bJEeLOMhKdS3dukOhT5FAcIAdJYfkKruzSnQvjCvsGSTUpdpEilMAiA7NPetXCvMfPzr5JlGBkwBbYAGtgBbz6tQdwBc7ACTgAl6Cq2s9c4UOhUtBAVv6evK9+12KqUCrUA4TbrH2NdKiBQmH/hHCbe18zyMCbwnFE8YZHX7vTQDGR+G8TxX8G0pFfe9fnSP8yUM4g3rBsG8j1ub99KGuvifh28A4sghrHOFh4TVDIdFiTGYuVQia49rqc8ekbLIGt4Hq7FTaCO1issBbcqWaFVaLwBbwYGfiW/mumheDChBUegksyVrgKLkZZ4Sy4DGeFk+AC5M1A/AYcBJdedwYGdsCl2YafwH1G8bvXjCeQRBHJzENpFLE8isEkitFstuE00fC9O8l4/gNz0YYudsoRxwAAAABJRU5ErkJggg==" >
  </div>
  <div class="right">right div</div>
</div>