css - 无法让 materialboxed 与裁剪后的图像一起使用

Question

所以对于 materializecss，我还没有想出如何制作图片的正方形网格，而是使用 col s(n) 来制作它们。由于所有这些图像的大小都不相等，我必须通过将其“object-fit”设置为“cover”以填充 col 高度并将溢出设置为“hidden”来制作一种样式以将它们平均网格化。

这就是问题所在，如果我在 img 标签上设置“materialboxed”，图像(在 col s(n) 内)的“object-fit”属性将被移除，基本上图像将恢复到原始纵横比, 但仍在列 s(n) 内。但是，如果我在 div class="col s(n)..."标签上设置“materialboxed”，则放大的图像会按照在网格中显示的方式进行裁剪。

如有任何帮助，我们将不胜感激。

谢谢。

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，但我没有这样做。