使Flexbox中的图像充满所有垂直空间并保持完全可见 [英] Have image within flexbox fill all vertical space and remain fully visible

问题描述

我需要在div的左边有一张图片，并有一张图片:

I need to have an image to the left of a div, and have the image:

• 与div相同的高度(本身具有不固定的，取决于内容的高度)；
• 完全可见；
• 保持其长宽比.

Flexbox似乎很适合这项工作，但是当将图像设置为100％高度时，Flexbox的尺寸将保留自然宽度，并且内容会在div下溢出.参见下面的代码段:

Flexbox seems perfect for the job, but when setting the image to 100% height, its dimensions retain the natural width and the content overflows under the div. See snippet below:

.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>

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

The red circle is clipped but I'd like it to be entirely visible, like so:

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

I've attempted placing the image in its own div and playing around with various overflow values with no success. Chrome will eventually display it right when using dev tools to disable then enable height: 100% on the img element, but this doesn't happen in Firefox.

推荐答案

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

This is somehow impossible as the browser need at least two iterations to correctly calulate the final width and this may create a cycle. Basically the broswer will first ignore the percentage height of the image to set the width/height of the container then will resolve the percentage height and after will calculate the width of the image to keep the ratio but it won't go back to adjust the width of the container again because it may lead to an infinite loop in some cases, that's why you will simply have an overflow.

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

Here is a hack that works only with Chrome where you can force the calculation of the width again by applying an animation.

.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>

这篇关于使Flexbox中的图像充满所有垂直空间并保持完全可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！