调整大小时的网格问题答案

【问题标题】：Grid problems on resize调整大小时的网格问题
【发布时间】：2015-11-04 12:57:29
【问题描述】：

有了这个，

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

我怎样才能在不变形的情况下显示图像。我试过了

max-width:100%;
height:auto;

但是当调整窗口大小时，网格会显示空格。

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

提前致谢，

【问题讨论】：

看起来一团糟 :$ 试过清理它吗？ >flexbox之类的东西？
真是一团糟……你不能只用jquery插件吗？ jqueryrain.com/demo/jquery-grid-plugin

标签： html css grid-layout

【解决方案1】：

您最好的选择可能是使用 background-position、background-size 和 object-fit object-position 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/

【讨论】：

嗨@Benneb10，感谢您的回答。这几乎符合我的解决方案，但现在图片被剪掉了……有什么办法可以解决这个细节吗？？
您可以使用 object-fit:contain，但它会在您的设计中留下巨大的空白。使用 object-fit:cover 填充所需的宽度：100% 和高度：100%，但是您可以使用 object-position 并指定要移动的 px 来选择它们的剪切和定位方式。老实说，我会更多地研究背景位置和背景大小，以便它具有更好的浏览器兼容性，但您可能需要更多地更改您的 html 和 css。