调整图像高度以匹配 flex 父高度答案

【问题标题】：Resize image height to match flex parent height调整图像高度以匹配 flex 父高度
【发布时间】：2021-02-14 15:31:03
【问题描述】：

我有一个超大图像，我想调整到其父级的高度，但它会不断调整父级的高度以匹配默认图像高度。我无法弄清楚我在这里做错了什么。我需要图像服从父高度，而不是相反。

请查看我的代码以获得更好的理解：

.container {
  height: 200px;
  border: 1px solid black;
}

.list {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.list-item {
  flex: 1;
  border: 1px solid black;
}

.img-wrap {
  height: 100%;
}

.img {
  height: 100%;
}

<div class="container">
  <ul class="list">
    <li class="list-item">
      <div class="img-wrap">
        <img class="img" src="https://via.placeholder.com/150"/>
      </div>
    </li>
    <li class="list-item">
      <div class="img-wrap">
        <img class="img" src="https://via.placeholder.com/150"/>
      </div>
    </li>
    <li class="list-item">
      <div class="img-wrap">
        <img class="img" src="https://via.placeholder.com/150"/>
      </div>
    </li>
  </ul>
</div>

编辑：代码 sn-p 自原始帖子以来已更新

【问题讨论】：

可能没有height: 400px或者改成min-height
如果我将它们从流程中取出，那么兄弟姐妹会忽略我拥有的边距。（不参考上述代码）
也许可以发布代码答案？

标签： html css image flexbox parent

【解决方案1】：

你可以简单地添加

 overflow:hidden;
 flex: 1;

到项目

HTML

  <div class="container">
  <div class="item">
    <img src="https://via.placeholder.com/150" />
  </div>
  <div class="item">
    <img src="https://via.placeholder.com/150" />
  </div>
  <div class="item">
<img src="https://via.placeholder.com/150" />
  </div>
</div>

CSS

 .container {
  height: 400px;
  border: 1px solid black;
  width: 500px;
  display: flex;
  flex-direction: column;
}

.item {
  overflow:hidden;
  flex: 1;
  border: 1px solid black;
}

.item img {
  height: 100%;
  width: auto;
}

试试：https://jsbin.com/tejezuq/edit?html,css,output

【讨论】：

虽然这个解决方案适用于我提供的微型示例，但它似乎不适用于我正在处理的应用程序（我不明白为什么）。
所以我们需要了解完整的结构......如果您在 Plunker（或类似）中有完整的非工作基础，我可以检查并帮助您
更新了我的答案，如果仍然没有帮助，请检查并告诉我。
列表高度不能为 100%，因为它是在 flex box 内弯曲的。假设有 2 个列表，高度需要设置为 flex: 1
知道了，所以容器高度应该是 200 和 flex 1；但是图像应该服从容器的高度......我正确吗？

【解决方案2】：

~~高度：400px~~

.container {
  border: 1px solid black;
  width: 500px;
  display: flex;
  flex-direction: column;
}

.item {
  flex: 1 0 auto;
  border: 1px solid black;
}

.item img {
  height: 100%;
  width: auto;
}

<div class="container">
  <div class="item">
    <img src="https://via.placeholder.com/150" alt="placeholder">
  </div>
  <div class="item">
    <img src="https://via.placeholder.com/150" alt="placeholder">
  </div>
  <div class="item">
    <img src="https://via.placeholder.com/150" alt="placeholder">
  </div>
</div>

【讨论】：

想象container 的高度必须是 400px，然后呢？