.gallery包含12 li，图像大小不一。目前，图库网格将所有li都显示为方形，如下所示：https : //jsfiddle.net/0nef5wjo/3/我正在努力学习如何将li设置为2：1矩形，并用不同大小的图像填充图像文件太高时的宽度和出血高度。我该怎么做？
.gallery {
display: grid;
grid-gap: 0.75rem;
grid-auto-flow: dense;
padding: 40px;
list-style: none;
background: white;
width: 100%;
box-sizing: border-box;
margin: 0 0 0 0;
}
li {
width: 100%;
height: 100%;
margin: 0;
border-radius: 15px;
display: block;
object-fit: cover;
box-shadow: 0em 0em .5em rgba(0 0 0 0.75);
}
img {
max-width: 100%;
}
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-image
您不仅可以“调整图像大小”并更改其大小...，还可以将其放置为背景图像。
.thing {
background-image url(here); /* but should be set inline in the HTML */
background-size: cover;
background-position: center center;
}
这是您的示例的分支：https : //jsfiddle.net/sheriffderek/nox954yt
祝好运！
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句