方形CSS网格与方形图像

Question

类似于这个问题，我想创建一个完美的方形网格，但在每个网格单元内部，我想放置一个100%高度的图像。

问题是，因为我做了padding-bottom: 100%; height: 0破解，height: 100%不再适用于图像，因为浏览器认为容器的高度为0。

如何设置图像的高度以匹配单元格的高度？

.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 4px;
}
.item {
overflow: hidden;
position: relative;
background-color: red;
width: 100%;
padding-bottom: 100%;
height: 0;
}
img {
position: relative;
left: 50%;
transform: translateX(-50%);
display: block;
/*height: 100%;*/
}

<div class="grid">
<div class="item">
<img src="https://picsum.photos/400/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/500/250">
</div>
<div class="item">
<img src="https://picsum.photos/600/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/400">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
</div>

我应该澄清一下，我的意图是将图像高度拉伸到100%，但保持纵横比。图像的左边缘和右边缘应根据需要进行剪裁，并且图像应居中。

Answer 1

您可以创建一个；隐藏的"；具有伪元素的单元格(宽度：0px；高度：0px，底部填充：100%；(，将其与实际的第一个单元格重叠，并使用网格自动行将所有单元格设置为相同的高度：1fr；并使图像绝对定位。

本文中的更多内容：https://medium.com/cloudaper/how-to-create-a-flexible-square-grid-with-css-grid-layout-ea48baf038f3

.grid::before {
content: '';
width: 0;
padding-bottom: 100%;
grid-row: 1 / 1;
grid-column: 1 / 1;
}
.grid > *:first-child {
grid-row: 1 / 1;
grid-column: 1 / 1;
}
.item {
overflow: hidden;
position: relative;
background-color: red;
width: 100%;
/* padding-bottom: 100%; */
/* height: 0; */
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
min-width: 100%;
min-height: 100%;
}

Answer 2

您可以使用object-fit: cover，然后为网格项指定一个明确的height，以便在填充元素的整个内容框时调整替换内容的大小以保持其纵横比。对象适合MDN

这将取代你的height: 0和padding-bottom: 100%破解。使用object-fit: cover时，需要注意的一点是，如果对象的纵横比与其框的纵横比不匹配，则对象将被剪裁以适应。

您不能将object-fit: cover与以下CSS一起使用，并且图像将继续填充网格项高度的100%，只是没有"；"剪裁合身"；部分

.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 4px;
}
.item {
overflow: hidden;
position: relative;
background-color: red;
width: 100%;
height: 18rem; /* vary this to what you need */
}
img {
display: block;
max-width: 100%;
object-fit: cover;
width: 100%;
height: 100%;
}

<div class="grid">
<div class="item">
<img src="https://picsum.photos/400/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/500/250">
</div>
<div class="item">
<img src="https://picsum.photos/600/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/400">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
</div>

Answer 3

您可以按照以下方式进行操作：

.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 4px;
}
.item {
background-color: red;
aspect-ratio: 1; /* square items */
}
img {
/* no size contribution */
width: 0;
height: 0;
/* */
/* fill the item space*/
min-height: 100%;
min-width: 100%;
/* */
display: block;
object-fit: cover; /* avoid distortion*/
}

<div class="grid">
<div class="item">
<img src="https://picsum.photos/400/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/500/250">
</div>
<div class="item">
<img src="https://picsum.photos/600/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/400">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
<div class="item">
<img src="https://picsum.photos/300/300">
</div>
</div>