如何使用方形项目构建响应式CSS网格以显示具有多个长宽比的图像 [英] How to build a responsive CSS grid with square items to display images with multiple aspect ratios
问题描述
我正在尝试为图片库构建此自适应网格。
I'm trying to build this responsive grid for an image gallery.
我希望网格项目始终都是正方形（纵横比1：1），即使图片以各种纵横比排列也是如此。
I want the grid items to be square-shaped at all times (aspect ratio 1:1), even though the pictures are coming in all sorts of aspect-ratios.
我可能会使用 object-fit：cover 在正方形项目内显示任何图片。
I'll probably display any picture inside the square items, using object-fit: cover.
我正在尝试找到一种在所有浏览器上都能正常运行的解决方案。没什么 hacky 。这似乎是一个简单的任务，但到目前为止，我仍无法解决这个问题。
I'm trying to get a solution that works well across browsers. Nothing too hacky. It's seems like a simple task but so far I couldn't wrap my head around it.
请参阅我制作的代码段示例。
See an example on the code snippet that I've made.
注意：每个图像都需要在其顶部带有图标，就像示例一样。
Note: Every image needs to have an icon on top of it, just like the example.
.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％设置填充的百分比基于CSS中的宽度。
You can use padding-top: 100% to set the height of a grid item - this will make a square as padding in percentages is based on width in CSS.
现在将图像设置为位置：绝对，以便将其从流程中删除，并且 height 将完全由网格项（ gridItemContainer ）上设置的填充顶部决定-请参见下面的演示：
Now make the image position: absolute so that it will be taken out of the flow and height will be fully dictated by padding-top set on the grid item (gridItemContainer) - see demo below:
.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>
这篇关于如何使用方形项目构建响应式CSS网格以显示具有多个长宽比的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
