css，在其父 div 中包含一个图像（在 flexbox 中）答案

【问题标题】：css, contain an image within its parent div (within flexbox)css，在其父 div 中包含一个图像（在 flexbox 中）
【发布时间】：2021-06-08 17:58:51
【问题描述】：

我想使用 flexbox 显示一系列带有小标题的图像。每对图像/文本都包含在一个 div 中。
每个 div 的最大高度最多为 30vh。并且图像应该被缩放以适应它们各自的 div。

好吧，它不起作用。图像溢出其容器。
这个问题非常常见，我将在下面附上相关问题的完整列表。

我认为所需布局的正确 css 应该是这样的：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 30vh;
}
img {
  object-fit: contain;
}

由于某种原因，图像不符合对象适合设置。这是记录问题的屏幕截图：

这是 jsfiddle 上的一个最小可重现示例：https://jsfiddle.net/17a8sj9o/9/

我也试过设置max-height: 100%;。但这仅适用于某些图像。如果你编辑 jsfiddle，你会看到：

尝试使用 max-height 让我觉得这个问题是 flexbox 布局和图像高度之间的一些奇怪的相互作用。
有很多相关的问题，他们总是提倡高度、最大高度和对象拟合的混合。
我进行了广泛搜索，但找不到解决我问题的解决方案。
以下是一些相关问题：

Contain an image within a div? 使用最大高度和最大宽度，使用绝对像素度量
Make an image width 100% of parent div, but not bigger than its own width 使用百分比的最大宽度
Img's max-height not respecting parent's dimensions 使用最大高度和属性的组合进行定位。另一个答案提到对象匹配

【问题讨论】：

我认为您需要在img 上设置width: 和height:。否则object-fit 不起作用。

标签： javascript html css flexbox

【解决方案1】：

我看到了你的问题，并记得我前段时间制作了一张照片幻灯片。

首先，它取决于图像的分辨率。就像 1920 x 1080 使它成为 16:9 的图像。

如果您知道图像的纵横比是多少，那么您应该使容器具有相同的比例。因此，如果图像是 16:9，则容器应该是一定数量的像素，例如2060 x (2060/16x9) = 1159 也是 16:9 的比例。如果不是，那么我认为您无法正确扩展它。

我想如果你再添加上面提到的东西，比如 display: flex 等，然后添加溢出：隐藏，图像重复：无。并将 width: 100%, height: 100% 添加到它工作的容器内的图像。

不确定它是否有效，但希望你能从中有所收获。如果没有，祝你好运:)！

【讨论】：

【解决方案2】：

看起来container 中的align-items 是溢出的原因。并将图像的宽度和高度设置为100%。所以你可以删除它，它可以防止图像溢出：

.container {
  display: flex;
  flex-direction: row;
  max-height: 30vh;
  /* background-color: red; */
  justify-content: center;
}

img {
  max-width: 100%;
  max-height: 100%;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  /* background-color: lightgreen; */
}

<div class="App">
    <div class="container">
      <div>
        <img src="https://www.fillmurray.com/200/300"></img>
      </div>
    </div>
    <div class="row">
      <div class="container">
        <img src="https://www.fillmurray.com/200/300"></img>
        <p>test</p>
      </div>
      <div class="container">
        <img src="https://www.fillmurray.com/200/300"></img>
        <p>test</p>
      </div>
    </div>
  </div>

【讨论】：

【解决方案3】：

可能与这个答案有关：The Automatic Minimum Size of Flex Items

.App {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

div.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 30vh;
}
img {
  min-height: 0;
}
.row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}

<div class="App">
    <div class="container">
        <img src="https://www.fillmurray.com/200/300"></img>
    </div>
    <div class="row">
        <div class="container">
            <img src="https://www.fillmurray.com/200/300"></img>
            <p>test</p>
        </div>
        <div class="container">
            <img src="https://www.fillmurray.com/200/300"></img>
        </div>
        </div>
    </div>
</div>

【讨论】：

【解决方案4】：

如果您对 img 使用 max-height: 30vh; 或 max-height: 100%; 我认为它会起作用。当你使用 max-height: 100%;无论父元素有多大，它都会自动适应其父元素。

.App {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 30vh;
}
img {
  max-height: 30vh;
    width: auto;
    object-fit: contain;
}
.row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}

【讨论】：

【解决方案5】：

您需要为图片设置尺寸。在您的情况下，max-height: 100% 将是足够的。

object-fit 告诉浏览器如何缩放您的图像，但不告诉它实际缩放它。

【讨论】：