如何创建一个HTML网格，其中单元格增长到精确的宽度，并隐藏额外的高度

Question

我正在尝试设计一个页面的样式，该页面显示上传的照片列表。

要求如下(在出现歧义时按此顺序应用(：

1. 照片必须在网格中
2. 必须有3列
3. 太宽的照片必须缩小到列宽
4. 太窄的照片必须增长到列宽
5. 短于宽的照片保持原样
6. 高过宽的照片会被截断(溢出隐藏(

除了最后一个，我可以做上面所有的事情。

我用padding-top: 100%试过这个技巧，但似乎所做的只是让所有东西都高出一倍。

那么，如何在具有定义的宽度和纵横比的单元格上隐藏溢出呢？

.container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.box {
margin: 1rem;
width: calc((100% - 1rem * 6) / 3);
}
.box img {
width: 100%;
}
.green {
background-color: green;
}
.red {
background-color: red;
}

<div class="container">
<div class="box green">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
<div class="box green">
<img src="https://dummyimage.com/100x100/000/fff">
</div>
<div class="box green">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
<div class="box green">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
<div class="box green">
<img src="https://dummyimage.com/300x200/000/fff">
</div>
<div class="box green">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
<div class="box red">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
<div class="box red">
<img src="https://dummyimage.com/200x300/000/fff">
</div>
<div class="box red">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</div>

Answer 1

还好，所以我再次尝试了padding-top: 100%顶部技巧，这次成功了。

您不能将其直接应用于flex容器(即.box(的子容器，您必须在其中有另一个框，如下所示：

.container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.box {
margin: 1rem;
width: calc((100% - 1rem * 6) / 3);
}
.box img {
width: 100%;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.aspect-ratio-box {
height: 0;
overflow: hidden;
padding-top: 100%;
position: relative;
}
.aspect-ratio-box-inside {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

<div class="container">
<div class="box green">
<div class="aspect-ratio-box">
<div class="aspect-ratio-box-inside">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</div>
</div>
<div class="box green">
<div class="aspect-ratio-box">
<div class="aspect-ratio-box-inside">
<img src="https://dummyimage.com/100x100/000/fff">
</div>
</div>
</div>
<div class="box green">
<div class="aspect-ratio-box">
<div class="aspect-ratio-box-inside">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</div>
</div>
<div class="box green">
<div class="aspect-ratio-box">
<div class="aspect-ratio-box-inside">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</div>
</div>
<div class="box green">
<div class="aspect-ratio-box">
<div class="aspect-ratio-box-inside">
<img src="https://dummyimage.com/300x200/000/fff">
</div>
</div>
</div>
<div class="box green">
<div class="aspect-ratio-box">
<div class="aspect-ratio-box-inside">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</div>
</div>
<div class="box red">
<div class="aspect-ratio-box">
<div class="aspect-ratio-box-inside">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</div>
</div>
<div class="box red">
<div class="aspect-ratio-box">
<div class="aspect-ratio-box-inside">
<img src="https://dummyimage.com/200x300/000/fff">
</div>
</div>
</div>
<div class="box red">
<div class="aspect-ratio-box">
<div class="aspect-ratio-box-inside">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</div>
</div>
</div>

它还修复了底部显示的那个奇怪的多余部分。