Having trouble with image sizing (image ratio?) - want image boxes to be the same size

Design help General
1

I am working on converting this page to Webflow. Right now, my page looks like this: Screenshot-2024-12-26-at-10-59-19-PM hosted at ImgBB — ImgBB

Screenshot-2024-12-26-at-11-18-45-PM hosted at ImgBB — ImgBB - this is what the layers look like

Sorry, I don’t have a read-only link because it’s not my site (I was invited to collaborate by the site admin). I’ve been searching online but haven’t been able to figure out how to solve this.

Can someone help me figure out how to make all the image boxes in the grid be of the same size and also NOT mess up the image ratio (so that some of the images aren’t weirdly stretched out)?

Thank you very much.

2

Hi Alee,

The basic approach is to use aspect ratio, and also object-fit: cover, primarily on the thumbnail image. You may need 100% width as well to ensure they all fill the space evenly.

Since you’re using a lightbox element as well, you may need to play a bit to ensure everything fits.

If you have problems with layouts like this your best bet for community assistance is to build a ptototype of it in a separate project you own. If you can’t figure it out in a clean install, at least then you have a readonly link so people can help.