有没有什么方法可以使用CSS网格制作一个方形的卡片容器

Question

这里你可以看到，这些卡片的高度取决于里面的图像。我希望它们是正方形的，而不管图像尺寸如何，即卡片容器应该是正方形的格式，然后我们可以使用图像对象fit:cover，我使用了纵横比：1属性，但它在实验阶段并不适用。单击此处查看屏幕截图。

.card-container{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 0.5rem;
padding: 1rem;
}
.card {
aspect-ratio: 1; // property is in experimental stage, doesn't work everywhere
}
.card img {
object-fit: cover;
}

`

Answer 1

您设置的object-fit选项不正确。

请尝试object-fit: contain;来解决此问题。

Answer 2

您可以采用旧的技巧，将填充底部设置为100%，高度设置为0，这可以确保项目是方形的，因为填充是使用元素的宽度而不是高度创建的。

在这个片段中，他的图像有不同的纵横比和自然大小，所以你可以看到它适用于这些图像的任何组合。

.card-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 0.5rem;
padding: 1rem;
width: 20vw;
}
.card {
width: 100%;
height: 0;
padding-bottom: 100%;
box-sizing: border-box;
position: relative;
}
.card img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}

<div class="card-container">
<div class="card"><img src="https://picsum.photos/id/1015/200/300"></div>
<div class="card"><img src="https://picsum.photos/id/1015/300/300"></div>
<div class="card"><img src="https://picsum.photos/id/1015/400/300"></div>
<div class="card"><img src="https://picsum.photos/id/1015/200/200"></div>
<div class="card"><img src="https://picsum.photos/id/1015/400/400"></div>
<div class="card"><img src="https://picsum.photos/id/1015/100/300"></div>
<div class="card"><img src="https://picsum.photos/id/1015/200/300"></div>
<div class="card"><img src="https://picsum.photos/id/1015/300/300"></div>
</div>

Answer 3

这是工作代码。你可以看看它。使用grid属性，但不使用aspect-ratio，你可以在伪类的帮助下复制它。必要时添加注释。如果其中任何部分需要解释，请告诉我。我使用了picsum的图像，它们并不完全是正方形的，所以你可以放心，无论图像尺寸如何，它都能工作。

编辑：由于每列的最小值为200px，考虑到网格间隙，在大约450px之后，您可能会得到一个单列网格。但是，如果您想要为低于该屏幕大小的设备使用双网格，则可以根据父容器的媒体查询将minmax()值降低到类似minmax(100px, 1fr)的值。

.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));/* not explicit repeat, adjusts to screen size based on minmax() */
grid-gap: 1rem;
}
.container div {
display: grid;
background: black;
padding: 1rem;
position: relative;
}
/* results in squared div no matter the screen sizes*/
.container > div::before {
content: "";
padding-bottom: 100%;
display: block;
}
img {
height: 100%;
width: 100%;
object-fit: cover;
position: absolute;
}
/* place image on top of :before */
.container > div::before, img {
grid-area: 1/1/2/2;
}

<div class="container">
<div><img src="https://i.picsum.photos/id/1025/4951/3301.jpg?hmac=_aGh5AtoOChip_iaMo8ZvvytfEojcgqbCH7dzaz-H8Y" alt=""></div>
<div><img src="https://i.picsum.photos/id/1018/3914/2935.jpg?hmac=3N43cQcvTE8NItexePvXvYBrAoGbRssNMpuvuWlwMKg" alt=""></div>
<div><img src="https://i.picsum.photos/id/1015/6000/4000.jpg?hmac=aHjb0fRa1t14DTIEBcoC12c5rAXOSwnVlaA5ujxPQ0I" alt=""></div>
<div><img src="https://i.picsum.photos/id/1010/5184/3456.jpg?hmac=7SE0MNAloXpJXDxio2nvoshUx9roGIJ_5pZej6qdxXs" alt=""></div>
<div><img src="https://i.picsum.photos/id/1035/5854/3903.jpg?hmac=DV0AS2MyjW6ddofvSIU9TVjj1kewfh7J3WEOvflY8TM" alt=""></div>
<div><img src="https://i.picsum.photos/id/1032/2880/1800.jpg?hmac=5SLBdyPZBMyr5IBkIRfffZV10bP87Y7RrxVZX1vCefA" alt=""></div>
</div>

Answer 4

.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));/* not explicit repeat, adjusts to screen size based on minmax() */
grid-gap: 1rem;
}
.container div {
display: grid;
background: black;
padding: 1rem;
position: relative;
}
/* results in squared div no matter the screen sizes*/
.container > div::before {
content: "";
padding-bottom: 100%;
display: block;
}
img {
height: 100%;
width: 100%;
object-fit: cover;
position: absolute;
}
/* place image on top of :before */
.container > div::before, img {
grid-area: 1/1/2/2;
}

<div class="container">
<div><img src="https://i.picsum.photos/id/1025/4951/3301.jpg?hmac=_aGh5AtoOChip_iaMo8ZvvytfEojcgqbCH7dzaz-H8Y" alt=""></div>
<div><img src="https://i.picsum.photos/id/1018/3914/2935.jpg?hmac=3N43cQcvTE8NItexePvXvYBrAoGbRssNMpuvuWlwMKg" alt=""></div>
<div><img src="https://i.picsum.photos/id/1015/6000/4000.jpg?hmac=aHjb0fRa1t14DTIEBcoC12c5rAXOSwnVlaA5ujxPQ0I" alt=""></div>
<div><img src="https://i.picsum.photos/id/1010/5184/3456.jpg?hmac=7SE0MNAloXpJXDxio2nvoshUx9roGIJ_5pZej6qdxXs" alt=""></div>
<div><img src="https://images.unsplash.com/photo-1518173946687-a4c8892bbd9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8bmF0dXJlfGVufDB8MXwwfHw%3D&auto=format&fit=crop&w=500&q=60" alt=""></div>
<div><img src="https://i.picsum.photos/id/1032/2880/1800.jpg?hmac=5SLBdyPZBMyr5IBkIRfffZV10bP87Y7RrxVZX1vCefA" alt=""></div>
</div>