Question

因此，对于materializecss，我还没有弄清楚如何制作正方形网格图片，而是使用col s（n）来制作它们。由于所有这些图像的大小都不相同，我必须通过给出＆＃34; object-fit＆＃34;来制作一种样式来平均它们。到＆＃34;覆盖＆＃34;填充col高度并将溢出设置为＆＃34; hidden＆＃34;。

如果我设置＆＃34; materialboxed＆＃34;这就是问题所在。在img标签上，图像（在col s（n）内部）将具有＆＃34; object-fit＆＃34;删除属性，基本上图像将恢复到原始宽高比，但仍然在col s（n）内。但是，如果我设置＆＃34; materialboxed＆＃34;在div class =＆＃34; col s（n）...＆＃34;标记，放大的图像显示与网格中显示的方式相同。

非常感谢任何帮助。

感谢。

HTML：

<div class="col s4 m4 l2 gridgallery" style="padding: 0px;">
 <img class="materialboxed" src="data/images/EXTERIOR_001.jpg">

CSS

.gridgallery {
    width: inherit;
    height: 180px;
}

.gridgallery img{
    object-fit: cover;
    height: 100%;
    width: auto;
    overflow: hidden;
}

Answer 1

只需在上面的CSS之后添加此CSS：

.materialboxed.active{
   object-fit:contain;
}

如有必要，您可以添加!important，但对于我而言，我没有这样做。

无法使用材料箱来处理裁剪后的图片

1 个答案: