0

I am trying to build this mosaic photo gallery using only CSS Grid (no plug-ins or Javascript). After all the CSS code, the result looks like in this pen https://codepen.io/Cilvako/pen/YzKLLZw

The problem is that with the photos having different dimensions, some of them get cropped pretty badly. Is there a solution to this or I should simply try to build my Grid more closely to the photos dimensions, so they don't get cropped? (I understand all the cropping comes from setting my column and rows).

I tried changing the object-fit: with other values, but the result is even weirder.

   .gallery__img {
       width: 100%;
       height: 100%;
       object-fit: cover;
}

Is there any way to have a mosaic gallery with photos of different dimensions that don't get cropped at all, no matter how you build your grid elements? Thank you!

Kasia
  • 118
  • 3
  • 16
  • 1
    https://developer.mozilla.org/en-US/docs/Web/CSS/object-position you can choose where to crop them, else adapt spanning closer to the image size/orientation – G-Cyrillus Sep 11 '19 at 21:56
  • 1
    Thank you, I think spanning closer to the image size will work best! – Kasia Sep 15 '19 at 20:29

0 Answers0