我在 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/