调整大小的网格问题

Question

有了这个，

Grid: http://jsfiddle.net/f5h08fc6/2/

如何实现显示图片不变形。我试过

max-width:100%;
height:auto;

但是在调整 window 大小时网格显示空白。

我找不到正确显示网格且网格上没有空格的解决方案。如果可能的话，我将不胜感激仅涉及 css 的解决方案。

提前致谢，

Answer 1

您最好的选择可能是尝试使用背景位置、背景大小和适合对象的对象位置 css。 Internet Explorer 不支持 Object-fit / object-position，但如果您设置此项，则不会发生拉伸，但要让图像定位到您想要的位置，您必须使用 object-position 来单独定位它们：

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

同时从 .secreto2:after 中删除绝对定位，否则在悬停时配合会搞砸。

http://jsfiddle.net/benneb10/f5h08fc6/6/

调整大小的网格问题

Grid problems on resize

html

css

grid-layout