im 尝试构建一个最大宽度为 800px 的三列两行响应式图片库。我想在定义背景图像的高度时摆脱它产生的差距。
.container {
display:flex;
justify-content:center;
}
.grid {
max-width: 800px;
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 2px;
width: 100%;
}
.img {
width: 100%;
height: 300px;
background-image:url('https://source.unsplash.com/user/erondu/1600x900');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="trash.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="grid">
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
</div>
</div>
</body>
</html>如果您使用bckground-size: contain它将保持图像比例，并且不适用于高度。
如果您添加background-size: cover它将正常工作。
试试这个
.img {
background-size: cover;
}
则不要将高度设置为300px
将其设置为自动
如果图像始终具有相同的比例，请使用填充技巧
.grid {
max-width: 800px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 2px;
width: 100%;
margin: auto;
}
.img {
padding-top: 56%;
background-image: url('https://source.unsplash.com/user/erondu/1600x900');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}<div class="grid">
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
</div>