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,13 +1,15 @@
 {{#if selectedImageUrl}}
     <div class='sf-product-gallery'>
-        {{> storefront-image
-            class='sf-product-gallery__main'
-            src=selectedImageUrl
-            alt=productTitle
-            width='1'
-            height='1'
-            fetchPriority='high'
-        }}
+        <div class='sf-product-gallery__media'>
+            {{> storefront-image
+                class='sf-product-gallery__main'
+                src=selectedImageUrl
+                alt=productTitle
+                width='1'
+                height='1'
+                fetchPriority='high'
+            }}
+        </div>
 
         {{#if galleryImages}}
             {{#if (gt galleryImages.length 1)}}