![](/img/trans.png)
[英]How can I fit images of different sizes into a CSS grid of the same size, while maintaining the aspect ratio of the images?
[英]How do I set a responsive li size ratio of 2:1 containing different sized images in grid
.gallery 包含 12 里,图像大小不一。 目前,画廊网格将所有 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/en-US/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
祝你好运!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.