Add media fit setting and functionality

assets/section-main-product.css

@@ -1366,6 +1366,8 @@ a.product__text {
 /* Product-thumbnail snippet */
 
 .product-media-container {
+  --aspect-ratio: var(--preview-ratio);
+  --ratio-percent: calc(1 / var(--aspect-ratio) * 100%);
   position: relative;
   width: 100%;
   max-width: calc(100% - calc(var(--media-border-width) * 2));
@@ -1387,16 +1389,28 @@ a.product__text {
     max-width: 100%;
   }
 
+  .product-media-container:not(.media-type-image) {
+    /* override to use actual media ratio (not poster ratio) for video/models on desktop */
+    --aspect-ratio: var(--ratio);
+  }
+
   .product-media-container.constrain-height {
     --viewport-offset: 170px;
     --contrained-min-height: 500px;
   }
-}
 
-.product-media-container.constrain-height.media-fit-contain {
-  /* the smaller of either the constrained width or the full size default */
-  --contained-width: calc(var(--constrained-height) * var(--width-scale));
-  width: min(var(--contained-width), 100%);
+  .product-media-container.media-fit-cover,
+  .product-media-container.media-fit-cover .product__modal-opener,
+  .product-media-container.media-fit-cover .media {
+    /* allow media to vertically fill available grid row space */
+    height: 100%;
+  }
+
+  .product-media-container.media-fit-cover .deferred-media__poster img {
+    /* allow deferred posters fill media container  */
+    object-fit: cover;
+    width: 100%;
+  }
 }
 
 .product-media-container .media {
@@ -1408,6 +1422,25 @@ a.product__text {
   padding-top: min(var(--constrained-height), var(--ratio-percent));
 }
 
+.product-media-container.constrain-height.media-fit-contain {
+  /* the smaller of either the constrained width or the full size default */
+  --contained-width: calc(var(--constrained-height) * var(--aspect-ratio));
+  width: min(var(--contained-width), 100%);
+}
+
+@media screen and (max-width: 749px) {
+  .product-media-container.media-fit-cover {
+    /* allow media to vertically fill available mobile slide space */
+    display: flex;
+    align-self: stretch;
+  }
+
+  .product-media-container.media-fit-cover .media {
+    /* allow media img element to scale relative to modal-opener/product-media-container */
+    position: initial;
+  }
+}
+
 .product-media-container .product__modal-opener {
   display: block;
   position: relative;

locales/en.default.schema.json

@@ -2058,6 +2058,15 @@
             "label": "Right"
           }
         },
+        "media_fit": {
+          "label": "Media fit",
+          "options__1": {
+            "label": "Original"
+          },
+          "options__2": {
+            "label": "Fill"
+          }
+        },
         "mobile_thumbnails": {
           "label": "Mobile layout",
           "options__1": {

sections/main-product.liquid

@@ -2072,12 +2072,6 @@
       "content": "t:sections.main-product.settings.header.content",
       "info": "t:sections.main-product.settings.header.info"
     },
-    {
-      "type": "checkbox",
-      "id": "constrain_to_viewport",
-      "default": false,
-      "label": "t:sections.main-product.settings.constrain_to_viewport.label"
-    },
     {
       "type": "select",
       "id": "media_size",
@@ -2099,6 +2093,28 @@
       "label": "t:sections.main-product.settings.media_size.label",
       "info": "t:sections.main-product.settings.media_size.info"
     },
+    {
+      "type": "checkbox",
+      "id": "constrain_to_viewport",
+      "default": false,
+      "label": "t:sections.main-product.settings.constrain_to_viewport.label"
+    },
+    {
+      "type": "select",
+      "id": "media_fit",
+      "options": [
+        {
+          "value": "contain",
+          "label": "t:sections.main-product.settings.media_fit.options__1.label"
+        },
+        {
+          "value": "cover",
+          "label": "t:sections.main-product.settings.media_fit.options__2.label"
+        }
+      ],
+      "default": "contain",
+      "label": "t:sections.main-product.settings.media_fit.label"
+    },
     {
       "type": "select",
       "id": "gallery_layout",

snippets/product-media-gallery.liquid

@@ -82,6 +82,7 @@
             modal_id: section.id,
             xr_button: true,
             media_width: media_width,
+            media_fit: section.settings.media_fit,
             constrain_to_viewport: section.settings.constrain_to_viewport,
             lazy_load: false
           %}
@@ -111,6 +112,7 @@
                 modal_id: section.id,
                 xr_button: true,
                 media_width: media_width,
+                media_fit: section.settings.media_fit,
                 constrain_to_viewport: section.settings.constrain_to_viewport,
                 lazy_load: lazy_load
               %}

snippets/product-thumbnail.liquid

@@ -11,6 +11,7 @@
     - loop: {Boolean} Enable video looping (optional)
     - modal_id: {String} The product modal that will be shown by clicking the thumbnail
     - xr_button: {Boolean} Renders the "View in your space" button (shopify-xr-button) if the media is a 3D Model
+    - media_fit: {String} Method ("contain" or "cover") to fit image into container
     - media_width: {Float} The width percentage that the media column occupies on desktop.
     - lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
 
@@ -38,28 +39,18 @@
     assign mobile_columns = 2
   endif
 
-  assign preview_media_ratio = 1 | divided_by: media.preview_image.aspect_ratio | times: 100
-  assign media_ratio = 1 | divided_by: media.aspect_ratio | times: 100
-
   if media.media_type == 'image'
     assign image_class = 'image-magnify-' | append: section.settings.image_zoom
   endif
-
-  assign media_ratio = 1 | divided_by: media.preview_image.aspect_ratio | times: 100
-  if media.media_type == 'video' or media.media_type == 'external_video'
-    assign media_ratio = 1 | divided_by: media.aspect_ratio | times: 100
-  elsif media.media_type == 'model'
-    assign media_ratio = 100
-  endif
 -%}
 
 {%- capture sizes -%}
   (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | times: media_width | divided_by: desktop_columns | round }}px, (min-width: 990px) calc({{ media_width | times: 100 | divided_by: desktop_columns }}vw - 10rem), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw / {{ mobile_columns }} - 4rem)
 {%- endcapture -%}
 
 <div
-  class="product-media-container media-fit-contain{% if constrain_to_viewport %} constrain-height{% endif %} gradient global-media-settings"
-  style="--ratio-percent: {{ media_ratio }}%; --width-scale: {{ 100 | divided_by: media_ratio }};"
+  class="product-media-container media-type-{{ media.media_type }} media-fit-{{ media_fit }}{% if constrain_to_viewport %} constrain-height{% endif %} gradient global-media-settings"
+  style="--ratio: {{ media.aspect_ratio | default: 1.0 }}; --preview-ratio: {{ media.preview_image.aspect_ratio | default: 1.0 }}"
 >
   <noscript>
     {%- if media.media_type == 'video' or media.media_type == 'external_video' -%}