Changing the banner to fit and not be blurry or blown up on desktop

[Wallowinwasabi]

I'm having serious trouble figuring out how to get the banner for any page in the "Image Banner" section to fit correctly. Any time I add a photo it blows it up and basically zooms in to the photo rather than use the original sizing. I would like to get the full photo in the image section but no matter how I resize the photo it doesn't work.

I've tried the following solutions:

• Resize the photo to whatever is recommended by shopify (I can't remember the exact size but like 1343px by 720px or something) 
• Inspecting with the dev tools to see size and do it that way
• Multiple size options like square, lanscape etc.
• Many different formats; png, jpg, svg
• Made sure the image resolution was able to be blown up and not blurry with appropriate dpi

I'm so frustrated lol. There has been no solution I've been able to find. I'm currently using the "Trade" theme and the website I'm helping create is here: https://headtotailcaninenutrition.myshopify.com/

I'm a low-code newbie and am slowly learning, so I'm open to going into the css to help adjust. I'm expecting it to be a media max-width thing but I just don't know how to do this. Image below is what it looks like on the page, but it's supposed to be zoomed out to include much more of the field.

[Zenquor]

Hi @Wallowinwasabi you can try chnaging the image class css from object-fit: cover; to object-fit: contain;

[Wallowinwasabi]

Hi there Zenquor, I tried this and while it works to resize, it still leaves gaps on the edges of the photos. I'm not sure why since the size of the photos are to shopify's standards. Is there a way to keep the default fill (or cover I guess) to use the entire picture and not just.....blow it up? Or do I need to get the exact size of the image banner photos every time if I want to use contain? Do you know what the sizeis the the small size banner height? Because when I'm going by their standards of 1200 by 400px I'm getting this when I use contain

and this when it's default

I'm trying with the blog page: https://headtotailcaninenutrition.myshopify.com/blogs/news

[Zenquor]

you can try object-fit: fill; but it will strach the image 

or resize the image 1920x400