Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • January 4, 2024 at 6:17 pm #1429296
    nickfarrelluk

    Hi

    I’m looking for a bit of help, and apologies for the untidyness of the code currently – it’s very early and I’ve yet to move all the external references in. Just trying to get a quick proof of concept going.

    I have an image grid showing the last X projects, but some images will be of different sizes and so I would like to use CSS to make the height of them all the same and use object-fit to cover the space – so the grid looks uniform.

    Recent Projects issue

    You can see the issue above with the ‘Cove Restaurant’ – the image is not of the right aspect ratio, and thus messes up the grid.

    I’ve tried adding object-fit css to the container, and the img itself, but neither seem to work. Any help would be much appreciated, thank you!

    Nick

    January 5, 2024 at 2:11 am #1429321
    Ismael

    Hey nickfarrelluk,

    Thank you for the inquiry.

    You can define a specific height for the grid-image containers to align the masonry items properly. To apply the object-fit property to the image itself, set its width and height to 100%. Please start with the following css code.

    .responsive .fullsize .grid-col-4 .grid-image {
  height: 264px !important;
}

.responsive .fullsize .grid-col-4 .grid-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

    Best regards,
    Ismael

    January 5, 2024 at 9:57 am #1429335
    nickfarrelluk

    That’s brilliant, thank you – problem solved. Really appreciate your rapid help!

    January 5, 2024 at 11:39 am #1429342
    Mike

    Hi,
    Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Object-fit for images in grid’ is closed to new replies.