Page media zoomed in

Hi there

I'm using the jasper jin template and have various page blocks on my home page. When I'm in the backend on squarespace the media for each page looks correct, but when I view the published version all the images are zoomed in and cropped awkwardly. I've re-uploaded the images and can't find a way to fix it. Obviously this doesn't look good in my portfolio so any suggestions are appreciated! 

I've attached images, the first image is how it looks in the backend, the second image shows the zoomed in version.

Thanks,

Natalie

It looks like you have the images set to fill not fit, in the design tab for the images, but I would need to view the page to tell you for sure, can you share your website URL? Thanks!

Hey here's the url https://www.nataliebritovsek.com/ 

I can't see any option to change it from fit to fill 

Thanks for sharing, I can see that you're using an older template in the York family and here an index grid:

https://support.squarespace.com/hc/en-us/articles/218211197-York-template-family?platform=v6&websiteId=6381f1ab7fa4241832915ff3#toc-thumbnail-layout

This is set up with 2 columns and a height  for each row, so the aspect ratio of the image containers is based on the screen width and therefore crops the image to fit into that container.

So on narrow screens it may look like this:

but on wide screens it looks like the image don't crop very much.

It looks like the image row height is dependant on a percentage of the screen height. You may be able to adjust the image row height to be a percentage of the width instead, which would help keep the ratio more consistent. A value somewhere around 20vw might be a starting point.

I hope that helps you understand what is happening.