Reputation: 11
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
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