时间戳

首页 > 解决方案 > 创建并排图像的问题（纯 HTML/CSS）

html - 创建并排图像的问题（纯 HTML/CSS）

问题描述

并排图像

我在上下组合行之间的垂直空间有问题。我在行中有一些不需要的空间这不是框内的边距或填充，我认为这个问题是针对 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>

标签： htmlcssimage

解决方案

我的猜测是它试图保持图像的纵横比。如果添加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>

推荐阅读