Hey folks,
I’ve started building a lightbox on my homepage (3 images and media).
The individual Lightboxes have been added within a 3x3 Grid.
The media are different aspect ratios but I want the Grid/Lightbox imagery to display square.
How do I achieve this? No amount of playing with sizes on Grid or Lightbox etc…is making a difference.
Many thanks for your help.
Here is my site Read-Only: [LINK](Webflow - Marc Motion Design)
(how to share your site Read-Only link)
@Marc1234 You can use the following CSS properties to ensure the image adjusts according to the parent div:
width: 100%;
height: 100%;
object-fit: cover;
This will make the image fit properly within the container. See the reference screenshot for more details.
Thanks so much!!! I’ll give that a go 
OK, how do I even find the CSS to edit it? The CSS preview only allows me to preview :) Thanks again
I managed to paste that copy into the same section you did in the screenshot but nothing happens, the boxes still display incorrectly. Any help gratefully received. Many thanks
Thanks for your response - I can’t find the img tag in the code how do I isolate it? thanks again
Thanks for all your help! that image still displays like this when I add that code in and make my settings the same as your in the screenshot:
Thank you that makes images 20 and 19 the same size. How do I make the content appear in a square?
Thanks, do I add that to all Images or all Lightbox Links?
Yes, you can add it to others too, but it’s better to create a common class and reuse it in other places.
Thank you but should that code be added on just the Images or the Lightbox Links classes?
to make centre you need to apply on Lightbox Links classes
Amazing thanks so much for your help!!! That worked :)
