CSS flex 缩小列中的图像答案

【问题标题】：CSS flex shrink images in columnCSS flex 缩小列中的图像
【发布时间】：2021-07-07 03:49:57
【问题描述】：

如何在flex-direction: column 中自动缩小 flex 孩子的高度，以便它们都适合父母的身高？

我试过flex-shrink，但没有帮助。

有可能吗？

提前谢谢你！

编辑

编辑了标题。
子元素是图像，我需要自动更改它们的高度，以便它们适合父元素并且不会溢出。

【问题讨论】：

你能更详细地描述你到底想做什么吗？如果可能的话，画出你想要达到的目标的粗略草图并将其张贴在这里，以便我们可以更好地帮助你
我更新了帖子，孩子们是图片，我希望他们改变他们的身高，这样他们就可以适应他们的父母并且不会导致溢出

标签： css flexbox

【解决方案1】：

尝试使用flex-wrap

.flex {
  display: flex;
  flex-wrap: wrap;
}

.bloc {
  width: 200px;
  height: 100px;
  margin: 5px;
  background-color: red;
}

<div class="flex">
  <div class="bloc">HELLO</div>
  <div class="bloc">HELLO</div>
  <div class="bloc">HELLO</div>
  <div class="bloc">HELLO</div>
  <div class="bloc">HELLO</div>
  <div class="bloc">HELLO</div>
  <div class="bloc">HELLO</div>
  <div class="bloc">HELLO</div>
  <div class="bloc">HELLO</div>
  <div class="bloc">HELLO</div>
</div>

【讨论】：

【解决方案2】：

试试这个：

.flex {
   display: flex;
}

.block {
   width: 200px;
   height: 100px;
   margin: 5px;
   border: 2px red solid;
   max-height: 100%;
}

<div class="flex">
  <img class="block" src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196"/>
  <img class="block" src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196"/>
  <img class="block" src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196"/>
  <img class="block" src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196"/>
  <img class="block" src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196"/>
  <img class="block" src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196"/>
  <img class="block" src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196"/>
</div>

【讨论】：