diff --git a/assets/quick-add.css b/assets/quick-add.css
index dc09633e9a8..1e253c53a72 100644
--- a/assets/quick-add.css
+++ b/assets/quick-add.css
@@ -90,7 +90,7 @@
   .quick-add-modal__content {
     bottom: 3.2rem;
   }
-  
+
   .quick-add-modal__content-info > * {
     max-height: 100%;
   }
@@ -209,3 +209,8 @@ quick-add-modal .product-form__buttons {
   min-width: 100%;
   box-sizing: border-box;
 }
+
+quick-add-modal .product-media-container.constrain-height .media {
+  /* constrain behavior tbd, negate constrain effects on quick add modal for now */
+  padding-top: var(--ratio-percent);
+}
diff --git a/assets/section-main-product.css b/assets/section-main-product.css
index e60833d7e38..8063fa9ddab 100644
--- a/assets/section-main-product.css
+++ b/assets/section-main-product.css
@@ -1366,14 +1366,72 @@ 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));
 }
 
+.product-media-container.constrain-height {
+  /* arbitrary offset value based on average theme spacing and header height */
+  --viewport-offset: 400px;
+  --constrained-min-height: 300px;
+  --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.product-media-container.constrain-height.media-fit-contain {
+  --contained-width: calc(var(--constrained-height) * var(--aspect-ratio));
+  width: min(var(--contained-width), 100%);
+}
+
+.product-media-container .media {
+  padding-top: var(--ratio-percent);
+}
+
+.product-media-container.constrain-height .media {
+  padding-top: min(var(--constrained-height), var(--ratio-percent));
+}
+
+@media screen and (max-width: 749px) {
+  .product-media-container.media-fit-cover {
+    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;
+  }
+}
+
 @media screen and (min-width: 750px) {
   .product-media-container {
     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;
+    --constrained-min-height: 500px;
+  }
+
+  .product-media-container.media-fit-cover,
+  .product-media-container.media-fit-cover .product__modal-opener,
+  .product-media-container.media-fit-cover .media {
+    height: 100%;
+  }
+
+  .product-media-container.media-fit-cover .deferred-media__poster img {
+    object-fit: cover;
+    width: 100%;
+  }
 }
 
 .product-media-container .product__modal-opener {
@@ -1386,7 +1444,3 @@ a.product__text {
     display: none;
   }
 }
-
-.product-media-container .media {
-  padding-top: var(--ratio-percent);
-}
diff --git a/locales/cs.schema.json b/locales/cs.schema.json
index d1523463f75..3ed7e7bad0e 100644
--- a/locales/cs.schema.json
+++ b/locales/cs.schema.json
@@ -1862,7 +1862,7 @@
           }
         },
         "media_size": {
-          "label": "Velikost multimédií v počítači",
+          "label": "Šířka multimédií v počítači",
           "info": "Multimédia se automaticky optimalizují pro mobilní prostředí.",
           "options__1": {
             "label": "Malá"
@@ -1908,6 +1908,18 @@
           "options__3": {
             "label": "Bez zvětšení"
           }
+        },
+        "constrain_to_viewport": {
+          "label": "Zmenšit multimédia na výšku obrazovky"
+        },
+        "media_fit": {
+          "label": "Přizpůsobení multimédií",
+          "options__1": {
+            "label": "Originál"
+          },
+          "options__2": {
+            "label": "Výplň"
+          }
         }
       }
     },
diff --git a/locales/da.schema.json b/locales/da.schema.json
index edb855e62e1..5af06b7cda7 100644
--- a/locales/da.schema.json
+++ b/locales/da.schema.json
@@ -1862,7 +1862,7 @@
           }
         },
         "media_size": {
-          "label": "Mediestørrelse til computer",
+          "label": "Computermediets bredde",
           "options__1": {
             "label": "Lille"
           },
@@ -1908,6 +1908,18 @@
           "options__3": {
             "label": "Ingen zoom"
           }
+        },
+        "constrain_to_viewport": {
+          "label": "Begræns mediet til skærmhøjden"
+        },
+        "media_fit": {
+          "label": "Medietilpasning",
+          "options__1": {
+            "label": "Oprindelig"
+          },
+          "options__2": {
+            "label": "Udfyld"
+          }
         }
       }
     },
diff --git a/locales/de.schema.json b/locales/de.schema.json
index b98dcb60608..8e9b1b09820 100644
--- a/locales/de.schema.json
+++ b/locales/de.schema.json
@@ -1861,7 +1861,7 @@
           }
         },
         "media_size": {
-          "label": "Mediengröße für Desktop",
+          "label": "Medienbreite für Desktop",
           "options__1": {
             "label": "Klein"
           },
@@ -1907,6 +1907,18 @@
           "options__3": {
             "label": "Nicht zoomen"
           }
+        },
+        "constrain_to_viewport": {
+          "label": "Medien auf Bildschirmhöhe beschränken"
+        },
+        "media_fit": {
+          "label": "Medienanpassung",
+          "options__1": {
+            "label": "Original"
+          },
+          "options__2": {
+            "label": "Füllung"
+          }
         }
       },
       "name": "Produktinformationen"
diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
index c288d5a5643..ed23035befc 100644
--- a/locales/en.default.schema.json
+++ b/locales/en.default.schema.json
@@ -2019,8 +2019,11 @@
             "label": "Thumbnail carousel"
           }
         },
+        "constrain_to_viewport": {
+          "label": "Constrain media to screen height"
+        },
         "media_size": {
-          "label": "Desktop media size",
+          "label": "Desktop media width",
           "info": "Media is automatically optimized for mobile.",
           "options__1": {
             "label": "Small"
@@ -2055,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": {
diff --git a/locales/es.schema.json b/locales/es.schema.json
index 3d4ca81d989..7f02894390b 100644
--- a/locales/es.schema.json
+++ b/locales/es.schema.json
@@ -1862,7 +1862,7 @@
           }
         },
         "media_size": {
-          "label": "Tamaño de elementos multimedia en computadoras",
+          "label": "Ancho del elemento multimedia en computadora",
           "info": "Los elementos multimedia se optimizan automáticamente para dispositivos móviles.",
           "options__1": {
             "label": "Pequeño"
@@ -1908,6 +1908,18 @@
           "options__3": {
             "label": "Sin zoom"
           }
+        },
+        "constrain_to_viewport": {
+          "label": "Ajustar el elemento multimedia a la altura de la pantalla"
+        },
+        "media_fit": {
+          "label": "Ajuste del elemento multimedia",
+          "options__1": {
+            "label": "Original"
+          },
+          "options__2": {
+            "label": "Rellenar"
+          }
         }
       }
     },
diff --git a/locales/fi.schema.json b/locales/fi.schema.json
index 944e4037dc2..79c88064a85 100644
--- a/locales/fi.schema.json
+++ b/locales/fi.schema.json
@@ -1861,7 +1861,7 @@
           }
         },
         "media_size": {
-          "label": "Median koko tietokoneella",
+          "label": "Median leveys tietokoneella",
           "options__1": {
             "label": "Pieni"
           },
@@ -1907,6 +1907,18 @@
           "options__3": {
             "label": "Ei zoomausta"
           }
+        },
+        "constrain_to_viewport": {
+          "label": "Sovita media näytön korkeuteen"
+        },
+        "media_fit": {
+          "label": "Median sovitus",
+          "options__1": {
+            "label": "Alkuperäinen"
+          },
+          "options__2": {
+            "label": "Täyttö"
+          }
         }
       },
       "name": "Tuotetiedot"
diff --git a/locales/fr.schema.json b/locales/fr.schema.json
index ae3bd84abf1..7d91abf9d8c 100644
--- a/locales/fr.schema.json
+++ b/locales/fr.schema.json
@@ -1861,7 +1861,7 @@
           }
         },
         "media_size": {
-          "label": "Taille du support de bureau",
+          "label": "Largeur des supports multimédias sur ordinateur",
           "info": "Les médias sont automatiquement optimisés pour les mobiles.",
           "options__1": {
             "label": "Petit"
@@ -1907,6 +1907,18 @@
           "options__3": {
             "label": "Pas de zoom"
           }
+        },
+        "constrain_to_viewport": {
+          "label": "Limiter les supports multimédias à la hauteur de l’écran"
+        },
+        "media_fit": {
+          "label": "Taille des supports multimédias",
+          "options__1": {
+            "label": "Taille d’origine"
+          },
+          "options__2": {
+            "label": "Remplir"
+          }
         }
       },
       "name": "Informations produits"
diff --git a/locales/it.schema.json b/locales/it.schema.json
index a881238eb35..3e0a87b3e02 100644
--- a/locales/it.schema.json
+++ b/locales/it.schema.json
@@ -1862,7 +1862,7 @@
           }
         },
         "media_size": {
-          "label": "Dimensioni contenuti multimediali desktop",
+          "label": "Larghezza dei contenuti multimediali su desktop",
           "options__1": {
             "label": "Piccola"
           },
@@ -1908,6 +1908,18 @@
           "options__3": {
             "label": "Nessuno zoom"
           }
+        },
+        "constrain_to_viewport": {
+          "label": "Adatta i contenuti multimediali all'altezza dello schermo"
+        },
+        "media_fit": {
+          "label": "Adattamento dei contenuti multimediali",
+          "options__1": {
+            "label": "Originale"
+          },
+          "options__2": {
+            "label": "Riempi"
+          }
         }
       }
     },
diff --git a/locales/ja.schema.json b/locales/ja.schema.json
index 5525cd5640a..ee8a7f22533 100644
--- a/locales/ja.schema.json
+++ b/locales/ja.schema.json
@@ -1862,7 +1862,7 @@
           }
         },
         "media_size": {
-          "label": "デスクトップのメディアサイズ",
+          "label": "デスクトップメディアの幅",
           "options__1": {
             "label": "小"
           },
@@ -1908,6 +1908,18 @@
           "options__3": {
             "label": "ズームなし"
           }
+        },
+        "constrain_to_viewport": {
+          "label": "メディアを画面の高さに制限する"
+        },
+        "media_fit": {
+          "label": "適合したメディア",
+          "options__1": {
+            "label": "オリジナル"
+          },
+          "options__2": {
+            "label": "塗りつぶし"
+          }
         }
       }
     },
diff --git a/locales/ko.schema.json b/locales/ko.schema.json
index 569f1dc5edd..3de9c2ee989 100644
--- a/locales/ko.schema.json
+++ b/locales/ko.schema.json
@@ -1862,7 +1862,7 @@
           }
         },
         "media_size": {
-          "label": "데스크톱 미디어 사이즈",
+          "label": "데스크톱 미디어 너비",
           "options__1": {
             "label": "작게"
           },
@@ -1908,6 +1908,18 @@
           "options__3": {
             "label": "확대/축소 안 함"
           }
+        },
+        "constrain_to_viewport": {
+          "label": "미디어를 화면 높이로 제한"
+        },
+        "media_fit": {
+          "label": "미디어 맞춤",
+          "options__1": {
+            "label": "원본"
+          },
+          "options__2": {
+            "label": "채우기"
+          }
         }
       }
     },
diff --git a/locales/nb.schema.json b/locales/nb.schema.json
index 3b0c084ba24..c7dbbae76bd 100644
--- a/locales/nb.schema.json
+++ b/locales/nb.schema.json
@@ -1861,7 +1861,7 @@
           }
         },
         "media_size": {
-          "label": "Størrelse på medier på datamaskiner",
+          "label": "Mediebredde på datamaskin",
           "info": "Medier optimaliseres automatisk for mobil.",
           "options__1": {
             "label": "Liten"
@@ -1907,6 +1907,18 @@
           "options__3": {
             "label": "Ingen zoom"
           }
+        },
+        "constrain_to_viewport": {
+          "label": "Begrens medier til skjermens høyde"
+        },
+        "media_fit": {
+          "label": "Mediepassform",
+          "options__1": {
+            "label": "Opprinnelig"
+          },
+          "options__2": {
+            "label": "Fyll ut"
+          }
         }
       },
       "name": "Produktinformasjon"
diff --git a/locales/nl.schema.json b/locales/nl.schema.json
index de1414629b3..90777fb473d 100644
--- a/locales/nl.schema.json
+++ b/locales/nl.schema.json
@@ -1862,7 +1862,7 @@
           }
         },
         "media_size": {
-          "label": "Mediagrootte desktop",
+          "label": "Media op desktopbreedte",
           "info": "Media wordt automatisch geoptimaliseerd voor mobiel.",
           "options__1": {
             "label": "Klein"
@@ -1908,6 +1908,18 @@
           "options__3": {
             "label": "Geen zoom"
           }
+        },
+        "constrain_to_viewport": {
+          "label": "Beperk media tot schermhoogte"
+        },
+        "media_fit": {
+          "label": "Media passen",
+          "options__1": {
+            "label": "Origineel"
+          },
+          "options__2": {
+            "label": "Opvullen"
+          }
         }
       }
     },
diff --git a/locales/pl.schema.json b/locales/pl.schema.json
index 5553304c58e..4690ede8ba4 100644
--- a/locales/pl.schema.json
+++ b/locales/pl.schema.json
@@ -1862,7 +1862,7 @@
           }
         },
         "media_size": {
-          "label": "Rozmiar plików multimedialnych dla komputera",
+          "label": "Szerokość multimediów dla komputera",
           "options__1": {
             "label": "Mały"
           },
@@ -1908,6 +1908,18 @@
           "options__3": {
             "label": "Bez powiększenia"
           }
+        },
+        "constrain_to_viewport": {
+          "label": "Ograniczenie multimediów do wysokości ekranu"
+        },
+        "media_fit": {
+          "label": "Dopasowanie multimediów",
+          "options__1": {
+            "label": "Oryginalny"
+          },
+          "options__2": {
+            "label": "Wypełnienie"
+          }
         }
       }
     },
diff --git a/locales/pt-BR.schema.json b/locales/pt-BR.schema.json
index 199fc519bf3..c27b8162f71 100644
--- a/locales/pt-BR.schema.json
+++ b/locales/pt-BR.schema.json
@@ -1861,7 +1861,7 @@
           }
         },
         "media_size": {
-          "label": "Tamanho da mídia para desktop",
+          "label": "Largura da mídia para desktop",
           "options__1": {
             "label": "Pequeno"
           },
@@ -1907,6 +1907,18 @@
           "options__3": {
             "label": "Sem zoom"
           }
+        },
+        "constrain_to_viewport": {
+          "label": "Ajustar a mídia à tela"
+        },
+        "media_fit": {
+          "label": "Ajuste da mídia",
+          "options__1": {
+            "label": "Original"
+          },
+          "options__2": {
+            "label": "Preenchimento"
+          }
         }
       },
       "name": "Informações do produto"
diff --git a/locales/pt-PT.schema.json b/locales/pt-PT.schema.json
index 8ad55da5c64..5dbd18045c5 100644
--- a/locales/pt-PT.schema.json
+++ b/locales/pt-PT.schema.json
@@ -1862,7 +1862,7 @@
           }
         },
         "media_size": {
-          "label": "Tamanho dos conteúdos multimédia para desktop",
+          "label": "Largura do conteúdo multimédia para computador",
           "options__1": {
             "label": "Pequeno"
           },
@@ -1908,6 +1908,18 @@
           "options__3": {
             "label": "Sem zoom"
           }
+        },
+        "constrain_to_viewport": {
+          "label": "Ajustar conteúdo multimédia ao ecrã"
+        },
+        "media_fit": {
+          "label": "Ajuste do conteúdo multimédia",
+          "options__1": {
+            "label": "Original"
+          },
+          "options__2": {
+            "label": "Preencher"
+          }
         }
       }
     },
diff --git a/locales/sv.schema.json b/locales/sv.schema.json
index 61247a21918..042061d9ea1 100644
--- a/locales/sv.schema.json
+++ b/locales/sv.schema.json
@@ -1862,7 +1862,7 @@
           }
         },
         "media_size": {
-          "label": "Mediastorlek på desktop",
+          "label": "Mediabredd för dator",
           "options__1": {
             "label": "Liten"
           },
@@ -1908,6 +1908,18 @@
           "options__3": {
             "label": "Ingen zoom"
           }
+        },
+        "constrain_to_viewport": {
+          "label": "Begränsa media till skärmhöjd"
+        },
+        "media_fit": {
+          "label": "Mediaanpassning",
+          "options__1": {
+            "label": "Original"
+          },
+          "options__2": {
+            "label": "Fyll"
+          }
         }
       }
     },
diff --git a/locales/th.schema.json b/locales/th.schema.json
index b96c95cf95b..4d24ba5c4c6 100644
--- a/locales/th.schema.json
+++ b/locales/th.schema.json
@@ -1862,7 +1862,7 @@
           }
         },
         "media_size": {
-          "label": "ขนาดของสื่อบนเดสก์ท็อป",
+          "label": "ความกว้างของสื่อบนเดสก์ท็อป",
           "options__1": {
             "label": "เล็ก"
           },
@@ -1908,6 +1908,18 @@
           "options__3": {
             "label": "ไม่มีการซูม"
           }
+        },
+        "constrain_to_viewport": {
+          "label": "จำกัดสื่อไว้ที่ความสูงของหน้าจอ"
+        },
+        "media_fit": {
+          "label": "สื่อแบบพอดี",
+          "options__1": {
+            "label": "ต้นฉบับ"
+          },
+          "options__2": {
+            "label": "การเติมสี"
+          }
         }
       }
     },
diff --git a/locales/tr.schema.json b/locales/tr.schema.json
index e7d54a9bbfb..8d2f96ec3aa 100644
--- a/locales/tr.schema.json
+++ b/locales/tr.schema.json
@@ -1861,7 +1861,7 @@
           }
         },
         "media_size": {
-          "label": "Masaüstü medya boyutu",
+          "label": "Masaüstü medya genişliği",
           "info": "Medya, mobil cihazlar için otomatik olarak optimize edilir.",
           "options__1": {
             "label": "Küçük"
@@ -1907,6 +1907,18 @@
           "options__3": {
             "label": "Yakınlaştırma yok"
           }
+        },
+        "constrain_to_viewport": {
+          "label": "Medyayı ekran yüksekliğiyle sınırla"
+        },
+        "media_fit": {
+          "label": "Medya sığdırma",
+          "options__1": {
+            "label": "Orijinal"
+          },
+          "options__2": {
+            "label": "Doldur"
+          }
         }
       },
       "name": "Ürün bilgileri"
diff --git a/locales/vi.schema.json b/locales/vi.schema.json
index 2747c124880..27643f071f3 100644
--- a/locales/vi.schema.json
+++ b/locales/vi.schema.json
@@ -1862,7 +1862,7 @@
           }
         },
         "media_size": {
-          "label": "Kích cỡ phương tiện trên màn hình nền",
+          "label": "Chiều rộng phương tiện trên màn hình nền",
           "info": "Phương tiện được tự động tối ưu hóa cho thiết bị di động.",
           "options__1": {
             "label": "Nhỏ"
@@ -1908,6 +1908,18 @@
           "options__3": {
             "label": "Không thu phóng"
           }
+        },
+        "constrain_to_viewport": {
+          "label": "Giới hạn phương tiện theo chiều cao màn hình"
+        },
+        "media_fit": {
+          "label": "Phù hợp với phương tiện",
+          "options__1": {
+            "label": "Gốc"
+          },
+          "options__2": {
+            "label": "Tràn màn hình"
+          }
         }
       }
     },
diff --git a/locales/zh-CN.schema.json b/locales/zh-CN.schema.json
index 81888326ffa..3bae2d34647 100644
--- a/locales/zh-CN.schema.json
+++ b/locales/zh-CN.schema.json
@@ -1862,7 +1862,7 @@
           }
         },
         "media_size": {
-          "label": "台式设备媒体文件大小",
+          "label": "台式设备媒体文件宽度",
           "options__1": {
             "label": "小"
           },
@@ -1908,6 +1908,18 @@
           "options__3": {
             "label": "无缩放"
           }
+        },
+        "constrain_to_viewport": {
+          "label": "将媒体文件限制为屏幕高度"
+        },
+        "media_fit": {
+          "label": "媒体文件适应",
+          "options__1": {
+            "label": "初始"
+          },
+          "options__2": {
+            "label": "填充"
+          }
         }
       }
     },
diff --git a/locales/zh-TW.schema.json b/locales/zh-TW.schema.json
index c5be7f6742f..dff2be70c37 100644
--- a/locales/zh-TW.schema.json
+++ b/locales/zh-TW.schema.json
@@ -1862,7 +1862,7 @@
           }
         },
         "media_size": {
-          "label": "桌面版多媒體檔案大小",
+          "label": "桌面版多媒體檔案寬度",
           "options__1": {
             "label": "小"
           },
@@ -1908,6 +1908,18 @@
           "options__3": {
             "label": "無縮放"
           }
+        },
+        "constrain_to_viewport": {
+          "label": "將多媒體檔案限制為螢幕高度"
+        },
+        "media_fit": {
+          "label": "多媒體檔案最適大小",
+          "options__1": {
+            "label": "原始"
+          },
+          "options__2": {
+            "label": "填滿"
+          }
         }
       }
     },
diff --git a/sections/main-product.liquid b/sections/main-product.liquid
index 777558161f7..7be9a5c86c0 100644
--- a/sections/main-product.liquid
+++ b/sections/main-product.liquid
@@ -2074,20 +2074,46 @@
     },
     {
       "type": "select",
-      "id": "media_position",
+      "id": "media_size",
       "options": [
         {
-          "value": "left",
-          "label": "t:sections.main-product.settings.media_position.options__1.label"
+          "value": "small",
+          "label": "t:sections.main-product.settings.media_size.options__1.label"
         },
         {
-          "value": "right",
-          "label": "t:sections.main-product.settings.media_position.options__2.label"
+          "value": "medium",
+          "label": "t:sections.main-product.settings.media_size.options__2.label"
+        },
+        {
+          "value": "large",
+          "label": "t:sections.main-product.settings.media_size.options__3.label"
         }
       ],
-      "default": "left",
-      "label": "t:sections.main-product.settings.media_position.label",
-      "info": "t:sections.main-product.settings.media_position.info"
+      "default": "large",
+      "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",
@@ -2115,24 +2141,20 @@
     },
     {
       "type": "select",
-      "id": "media_size",
+      "id": "media_position",
       "options": [
         {
-          "value": "small",
-          "label": "t:sections.main-product.settings.media_size.options__1.label"
-        },
-        {
-          "value": "medium",
-          "label": "t:sections.main-product.settings.media_size.options__2.label"
+          "value": "left",
+          "label": "t:sections.main-product.settings.media_position.options__1.label"
         },
         {
-          "value": "large",
-          "label": "t:sections.main-product.settings.media_size.options__3.label"
+          "value": "right",
+          "label": "t:sections.main-product.settings.media_position.options__2.label"
         }
       ],
-      "default": "large",
-      "label": "t:sections.main-product.settings.media_size.label",
-      "info": "t:sections.main-product.settings.media_size.info"
+      "default": "left",
+      "label": "t:sections.main-product.settings.media_position.label",
+      "info": "t:sections.main-product.settings.media_position.info"
     },
     {
       "type": "select",
diff --git a/snippets/product-media-gallery.liquid b/snippets/product-media-gallery.liquid
index d83bea9b1d9..99478667137 100644
--- a/snippets/product-media-gallery.liquid
+++ b/snippets/product-media-gallery.liquid
@@ -72,7 +72,20 @@
           data-media-id="{{ section.id }}-{{ featured_media.id }}"
         >
           {%- assign media_position = 1 -%}
-          {% render 'product-thumbnail', media: featured_media, media_count: media_count, position: media_position, desktop_layout: section.settings.gallery_layout, mobile_layout: section.settings.mobile_thumbnails, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true, media_width: media_width, lazy_load: false %}
+          {% render 'product-thumbnail',
+            media: featured_media,
+            media_count: media_count,
+            position: media_position,
+            desktop_layout: section.settings.gallery_layout,
+            mobile_layout: section.settings.mobile_thumbnails,
+            loop: section.settings.enable_video_looping,
+            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
+          %}
         </li>
       {%- endif -%}
       {%- for media in product.media -%}
@@ -88,8 +101,21 @@
               if media_position > 1
                 assign lazy_load = true
               endif
-              render 'product-thumbnail', media: media, media_count: media_count, position: media_position, desktop_layout: section.settings.gallery_layout, mobile_layout: section.settings.mobile_thumbnails, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true, media_width: media_width, lazy_load: lazy_load
             -%}
+            {% render 'product-thumbnail',
+                media: media,
+                media_count: media_count,
+                position: media_position,
+                desktop_layout: section.settings.gallery_layout,
+                mobile_layout: section.settings.mobile_thumbnails,
+                loop: section.settings.enable_video_looping,
+                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
+              %}
           </li>
         {%- endunless -%}
       {%- endfor -%}
diff --git a/snippets/product-thumbnail.liquid b/snippets/product-thumbnail.liquid
index e63d0d61666..e8e30c789f6 100644
--- a/snippets/product-thumbnail.liquid
+++ b/snippets/product-thumbnail.liquid
@@ -11,6 +11,8 @@
     - 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
+    - constrain_to_viewport: {Boolean} Force media height to fit within viewport
+    - 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,9 +40,6 @@
     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
@@ -51,8 +50,8 @@
 {%- endcapture -%}
 
 <div
-  class="product-media-container gradient global-media-settings"
-  style="--ratio-percent: {{ preview_media_ratio }}%;"
+  class="product-media-container media-type-{{ media.media_type }} media-fit-{{ media_fit }} global-media-settings gradient{% if constrain_to_viewport %} constrain-height{% endif %}"
+  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' -%}
@@ -111,9 +110,9 @@
 
   {%- if media.media_type != 'image' -%}
     {%- if media.media_type == 'model' -%}
-      <product-model class="deferred-media media media--transparent no-js-hidden" style="--ratio-percent: 100%;" data-media-id="{{ media.id }}">
+      <product-model class="deferred-media media media--transparent no-js-hidden" data-media-id="{{ media.id }}">
     {%- else -%}
-      <deferred-media class="deferred-media media media--transparent no-js-hidden" style="--ratio-percent: {{ media_ratio }}%;" data-media-id="{{ media.id }}">
+      <deferred-media class="deferred-media media media--transparent no-js-hidden" data-media-id="{{ media.id }}">
     {%- endif -%}
     <button id="Deferred-Poster-Modal-{{ media.id }}" class="deferred-media__poster" type="button">
       <span class="deferred-media__poster-button motion-reduce">