Why does my desktop banner image automatically zoom in?

Why does my desktop banner image automatically zoom in?

Vlavlip
Excursionist
49 0 8

Hi all,

 

I am facing a problem; for some reason shopify automatically zooms in on all the images on desktop I use for the banner of my website. I have tried uploading different images sizes but it doesn't seem to help. 

 

Does anyone knows how to fix this problem?

 

website: https://ordinarythings.club

 

Example on website:

Screenshot 2024-02-14 at 09.10.55.png

 

Original Image

Screenshot 2024-02-14 at 09.12.03.png

 Thank you!

 

 

Replies 6 (6)

Anshul_arora
Navigator
453 129 104

Hello @Vlavlip ,

I have reviewed your store and understand the issue of banner image.

I believe you have selected a "Ambient movement" Animation effect in theme customizer https://prnt.sc/esAVmLsOvnVd , as in this option the moving effect of zoomed banner images will appear.

Please follow the below mentioned steps to resolve this issue.

- Go to Online Store -> Theme -> Click Customize button https://prnt.sc/Jq0LbKimKwgy

- Now click on the Image Banner https://prnt.sc/aSX6OvKPo6Ql

- Next , scroll and change the Image Behavior https://prnt.sc/x0HfvBTMPrML  and save.

I hope it helps.

Please let me know if you have any query.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
Vlavlip
Excursionist
49 0 8

Thank you for your message. I have tried this before but it doesn't seem to help.

Image behavior is now set to none.

 

Any other solution?

Anshul_arora
Navigator
453 129 104

Hello @Vlavlip ,

Ok, Please add the below mentioned code in your store base.css file.

1. Open the the code editor https://prnt.sc/mSIRMRHNAnVk

2. Open and paste the below mentioned code at the end of base.css file https://prnt.sc/nwZef0sqrAaT

.banner > .banner__media > img {
object-fit: fill;
}

3. Save changes.

Output -

Anshul_arora_0-1707984563478.png

 

I hope it helps

Please let me know if you have any query.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
Vlavlip
Excursionist
49 0 8

Thx for the suggestion.

Unfortunately it still doesn't really help because now the images is stretched weirdly out of proportion. Any suggestions?

Jessyandco
Visitor
1 0 1

having the same issue, cannot find any solution anywhere in the forum! sticking around for someone to help you out! 

Chris_111
Visitor
1 0 0

Hello,

 

I'm experiencing the same issue. I've tried the code mentioned below and the banner image is stretched weirdly out of proportion too. 

I would really appreciate a solution as I've been looking for answers quite a long time and couldn't find anything on the forum.

 

Kind Regards