我正在尝试为图片库构建这个响应式网格。
我希望网格项目始终为方形（纵横比 1:1），即使图片以各种纵横比出现。
我可能会在方形项目内显示任何图片，使用object-fit: cover.
我正在尝试获得一个跨浏览器运行良好的解决方案。没有什么太hacky。这似乎是一项简单的任务，但到目前为止我无法理解它。
请参阅我制作的代码片段的示例。
注意：每张图片上面都需要有一个图标，就像示例一样。
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}
.gridItemContainer {
position: relative;
}
.grid img {
display: block;
object-fit: cover;
width: 100%;
}
.grid i {
font-size: 120%;
position: absolute;
top: 10px;
left: 10px;
}<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
<div class="grid"/>
<div class="gridItemContainer"/>
<img src="https://images-na.ssl-images-amazon.com/images/I/41g1xjf4CpL.jpg"/>
<i class="fas fa-star"></i>
</div>
<div class="gridItemContainer"/>
<img src="https://images-na.ssl-images-amazon.com/images/I/4106U8dHTgL.jpg"/>
<i class="fas fa-star"></i>
</div>
<div class="gridItemContainer"/>
<img src="https://images-na.ssl-images-amazon.com/images/I/41cSJCJ%2BSaL.jpg"/>
<i class="fas fa-star"></i>
</div>
<div class="gridItemContainer"/>
<img src="https://images-na.ssl-images-amazon.com/images/I/41DpkMbHZZL.jpg"/>
<i class="fas fa-star"></i>
</div>
<div class="gridItemContainer"/>
<img src="https://images-na.ssl-images-amazon.com/images/I/41i-GWf875L.jpg"/>
<i class="fas fa-star"></i>
</div>
<div class="gridItemContainer"/>
<img src="https://images-na.ssl-images-amazon.com/images/I/51LUVEJQbjL.jpg"/>
<i class="fas fa-star"></i>
</div>
</div>您可以使用padding-top: 100%设置height一个的网格项-这会让一个方形的padding百分比是基于CSS的宽度。
现在制作图像，position: absolute以便将其从流中取出并height完全由网格项( )padding-top上的设置决定- 请参见下面的演示：gridItemContainer
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}
.gridItemContainer {
position: relative;
padding-top: 100%; /* added */
border: 1px solid;
background: cadetblue;
}
.grid img {
display: block;
object-fit: cover;
width: 100%;
height: 100%; /* image fills the grid item */
position: absolute; /* position absolutely */
top: 0;
left: 0;
}
.grid i {
font-size: 120%;
position: absolute;
top: 10px;
left: 10px;
}<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
<div class="grid"/>
<div class="gridItemContainer">
<img src="https://images-na.ssl-images-amazon.com/images/I/41g1xjf4CpL.jpg"/>
<i class="fas fa-star"></i>
</div>
<div class="gridItemContainer">
<img src="https://images-na.ssl-images-amazon.com/images/I/4106U8dHTgL.jpg"/>
<i class="fas fa-star"></i>
</div>
<div class="gridItemContainer">
<img src="https://images-na.ssl-images-amazon.com/images/I/41cSJCJ%2BSaL.jpg"/>
<i class="fas fa-star"></i>
</div>
<div class="gridItemContainer">
<img src="https://images-na.ssl-images-amazon.com/images/I/41DpkMbHZZL.jpg"/>
<i class="fas fa-star"></i>
</div>
<div class="gridItemContainer">
<img src="https://images-na.ssl-images-amazon.com/images/I/41i-GWf875L.jpg"/>
<i class="fas fa-star"></i>
</div>
<div class="gridItemContainer">
<img src="https://images-na.ssl-images-amazon.com/images/I/51LUVEJQbjL.jpg"/>
<i class="fas fa-star"></i>
</div>
</div>