我在我的网站上使用CSS创建了这个砌体（图片1）。
picture 1
它在我的屏幕上显示正常，但是当我最小化浏览器窗口时，左边的大图像的高度与右边的列的高度不匹配（图2）。如何解决这个问题？
enter image description here .
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.small_1 { grid-area: small_1; }
.small_2 { grid-area: small_2; }
.small_3 { grid-area: small_3; }
.large {
grid-area: large;
}
.medium_1 { grid-area: medium_1; }
.medium_2 { grid-area: medium_2; }
.grid-container {
display: grid;
grid-template-areas:
'small_1 small_1 small_2 small_2 small_3 small_3'
'large large large large medium_1 medium_1'
'large large large large medium_2 medium_2 ';
grid-row-gap: 30px;
padding: 62px;
}
.grid-container > div {
text-align: center;
}
</style>
1条答案
按热度按时间nzk0hqpo1#
很有可能是你的图片没有填满网格容器。要看到这个，给你的子div添加一个边框（只需弹出一个
border: 1px solid red;或类似于.grid-container > div规则。有几种方法可以解决这个问题。最简单的方法是将图像的宽度和高度设置为容器的100%（参见下面的示例）。如果你想设置你的网格子div的大小，但仍然想让图像填充容器，那么你也可以看看object-fit。object-fit: cover是相当流行的，因为它保持了图像的宽高比，它填充了父div，但剪辑了它。