Debut theme - Product image aspect ratio changes when zooming & Internet browser zooming issues

Store Design
1

The aspect ratio of the product images changes from 1:1 when you hover your mouse/zoom on the image. That means there is also a massive gap between the hero product image and the other images.

Also when you zoom in and zoom out your internet browser it makes the product image spacing worse.

https://chaletboutique.com.au/collections/plants/products/syngonium-dwarf-princess

Internet browser set to 100%. The gap between images looks like the first image. When you hover/zoom the image looks like the second image.

Image 2.jpg
Image 2.jpg1477×903 174 KB

Image 1.jpg
Image 1.jpg1477×903 194 KB

Internet browser set to 33% and the images move away like this

Image 3.jpg
Image 3.jpg1477×903 47.7 KB

2

@chaletboutique
Hii,

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

#ImageZoom-product-template-26299802124452 {
  max-height: 540px;
}
3

Thank you for this. It hasn’t changed though sorry. Is there something else I can try?

https://chaletboutique.com.au/collections/plants/products/spathiphyllum-domino-huge

4

@chaletboutique
Hii,
Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

.product-single__media {height: auto !important;}
5

This works perfectly! Thank you so much!