Images being cropped at the top

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

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

It’s how the background is being set:


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.

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.

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

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