Html 关于调整大小的网格问题

有了这个,

Grid:

如何实现在不变形的情况下显示图像。我试过了

max-width:100%;
height:auto;

但在调整窗口大小时，网格会显示空格

我无法找到正确显示网格且网格上没有空格的解决方案。如果可能的话，我会很感激一个只涉及css的解决方案

---

提前感谢，

您最好的选择可能是使用背景位置、背景大小和对象适合对象位置css。internet explorer不支持对象拟合/对象位置，但如果设置此项，则不会发生拉伸，但要按所需方式定位图像，必须使用“对象位置”来单独定位图像：

.secreto2 img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50%;
}

另外，从.secreto2:after中删除绝对定位，否则在悬停时会拧紧配合

---

看起来一团糟：$有没有试过清理它？><顺便提一下也许你可以使用这样的东西？它真的是一团糟…你不能只使用jquery插件吗？你好@Benneb10，谢谢你的回答。这几乎符合我的解决方案，但现在图片被剪切。。。有没有办法解决这个细节？你可以使用objectfit:contain，但它会在你的设计中留下巨大的空白。使用“对象拟合：封面”填充所需的宽度：100%和高度：100%，但是您可以使用对象位置和指定要移动的px来选择剪切和定位方式。老实说，我会更多地研究背景位置和背景大小，这样它就有更好的浏览器兼容性，但您可能需要更多地更改html和css。