Images being cropped at the top

Design help General
1

I am trying to update the photos on my company’s team page and I replaced the photos in the collection list and no matter what size I crop the photos before uploading, the 3 photos at the top of the page are always cut off at the top. I don’t want to resize the container items because then it throws off the sizing for the whole page. Here is a screenshot and I can’t upload a read-only link because every time I make one it says this site cannot be reached

Screenshot 2024-07-29 152553
Screenshot 2024-07-29 1525531919×1077 176 KB

Here is the read only link anyway even though it will not work:
https://preview.webflow.com/preview/opveon?utm_medium=preview_link&utm_source=designer&utm_content=opveon&preview=cc26aa606b17c70ac23aceb6865daae5&workflow=preview

I have made multiple new links, I have cleared my cache and I still cannot get any read only links to work

2

It’s how the background is being set:

image
image1744×484 58.8 KB

If you change it to custom with 100%x100% it will fill the whole square as you have it now, but if you have different sized images, it could cause some blurring.

3

The best practice would be to prepare the assets so they look consistent in terms of proportions and space around the subject of the picture.

This way you’d avoid having a picture that fits perfectly, and others that get cropped.

Just crop the pictures accordingly and re-upload.

4

I did try this i cropped them 100 different ways and no matter what it still cut off their heads

5

This worked thank you! I knew it wasn’t the image square, but I didn’t think about the background.