fix sf procuct detail page main image display

backend/src/modules/storefrontCore/public/css/storefront.css

@@ -1051,14 +1051,21 @@ a:hover {
     }
 }
 
-.sf-product-gallery__main {
+.sf-product-gallery__media {
     display: block;
     width: 100%;
     aspect-ratio: 1;
-    object-fit: cover;
+    background: var(--sf-surface-muted);
     border-radius: var(--sf-radius);
     border: 1px solid var(--sf-border);
-    background: var(--sf-surface-muted);
+    overflow: hidden;
+}
+
+.sf-product-gallery__main {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
 }
 
 .sf-product-gallery__thumbs {

backend/src/modules/storefrontCore/views/partials/variant-image-gallery.hbs

@@ -1,5 +1,6 @@
 {{#if selectedImageUrl}}
     <div class='sf-product-gallery'>
+        <div class='sf-product-gallery__media'>
             {{> storefront-image
                 class='sf-product-gallery__main'
                 src=selectedImageUrl
@@ -8,6 +9,7 @@
                 height='1'
                 fetchPriority='high'
             }}
+        </div>
 
         {{#if galleryImages}}
             {{#if (gt galleryImages.length 1)}}