我在我的网站上使用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,但剪辑了它。