html - 创建并排图像时出现问题(纯 HTML/CSS)

标签 html css image

side-by-side image

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

最佳答案

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

关于html - 创建并排图像时出现问题(纯 HTML/CSS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56099267/

相关文章:

javascript - 选择特定的 css 动画帧

html - 输入类型的宽度为 100% 并位于父 div 内

python - 在 python PIL 中使用三次插值放大图像

html - 如何在不扭曲图像的情况下将图像放入固定大小的 div 中?

javascript - 如何在搜索时获取先前选择的 Bootstrap 数据表行

php - Wordpress 添加按钮链接

html - bulma 字段类不会创建边距底部

html - 如何将 "table"放在网页中间?

javascript - 如何在 iframe 标签中添加谷歌地图

c# - 如何使用 mvvcross/monodroid 在位图中插入文本?