Hour Senghong
Hour Senghong

Reputation: 11

Can't get materialboxed to work with cropped image

So with materializecss, I haven't figured out how to make square grid of pictures just yet, instead I used col s(n) to make them instead. Since all those images aren't equal in size, I have to make a style to grid them equally by giving its "object-fit" to "cover" to fill the col height and set overflow to "hidden".

Here is the problem, if I set "materialboxed" on img tag, the images (inside col s(n)) will have their "object-fit" property removed, basically the images will go back to their original aspect ratio, but still inside the col s(n). But if I set "materialboxed" on div class="col s(n)..." tag, the enlarged images are shown cropped the same way it is shown in the grid.

Any help would be much appreciated.

Thanks.

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;
}

Upvotes: 1

Views: 286

Answers (1)

aristyo krishartanto
aristyo krishartanto

Reputation: 11

Just add this css after your css above:

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

You can add !important if necessary but in my case I didn't do it.

Upvotes: 1

Related Questions