创建并排图像时出现问题（纯HTML / CSS）

Question

我在向上和向下投资组合行之间的垂直空间有问题。 我的行中有一些多余的空间 这不是空白或在框中填充，我认为这个问题是针对img标签的 谁能帮我吗？

.portfolio.row {
display: flex;
}
.col-4 {
  flex: 33.33%;
}
.portfolio > div img {
  width: 100%;
}

<div class="portfolio row">
  <div class="col-4" id="coffe">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature1">
  </div>
  <div class="col-4" id="coffe">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature2">
  </div>
  <div class="col-4" id="coffe">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature3">
  </div>
</div>
<div class="portfolio row">
  <div class="col-4" id="work">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature1">
  </div>
  <div class="col-4" id="work">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature2">
  </div>
  <div class="col-4" id="work">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature3">
  </div>
</div>

Answer 1

我的猜测是它试图保持图像的长宽比。如果您添加height: 100%，它将起作用：

.portfolio.row {
display: flex;
}
.col-4 {
  flex: 33.33%;
}
.portfolio > div img {
  width: 100%;
  height: 100%;
}

<div class="portfolio row">
  <div class="col-4" id="coffe">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature1">
  </div>
  <div class="col-4" id="coffe">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature2">
  </div>
  <div class="col-4" id="coffe">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature3">
  </div>
</div>
<div class="portfolio row">
  <div class="col-4" id="work">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature1">
  </div>
  <div class="col-4" id="work">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature2">
  </div>
  <div class="col-4" id="work">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature3">
  </div>
</div>

Answer 2

只需使用以下代码，它将被修复！ height: 100%;将解决您的问题。这是example

.portfolio>div img {
  width: 100%;
  height: 100%;  /* Add this extar value */
}