Question

我有一个尺寸过大的图像，我想将其调整为父图像的高度，但是它会继续调整父图像的高度以匹配默认图像的高度。我无法弄清楚我在做什么错。我需要图像遵循父母的身高，而不是相反。

请参阅我的代码以获得更好的理解：

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

编辑：自原始文章以来，代码段已更新

Answer 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

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

调整图像高度以匹配弹性父级高度

2 个答案: