Fix tall images on PDPs and PLPs

Author: bookernath

assets/js/theme/global.js

@@ -13,6 +13,7 @@ import maintenanceMode from './global/maintenanceMode';
 import carousel from './common/carousel';
 import loadingProgressBar from './global/loading-progress-bar';
 import svgInjector from './global/svg-injector';
+import objectFitImages from './global/object-fit-polyfill';
 
 export default class Global extends PageManager {
     onReady() {
@@ -28,5 +29,6 @@ export default class Global extends PageManager {
         maintenanceMode(this.context.maintenanceMode);
         loadingProgressBar();
         svgInjector();
+        objectFitImages();
     }
 }

assets/js/theme/global/object-fit-polyfill.js

@@ -0,0 +1,5 @@
+import objectFitImages from 'object-fit-images';
+
+export default function () {
+    objectFitImages();
+}

assets/scss/components/citadel/cards/_cards.scss

@@ -51,6 +51,9 @@
     border: 0;
     width: 100%;
     max-height: 100%;
+    object-fit: contain;
+    /* Object-fit polyfill */
+    font-family: 'object-fit: contain;';
 }
 
 .card-title {

assets/scss/components/stencil/productView/_productView.scss

@@ -49,6 +49,9 @@
         @include lazy-loaded-img;
         max-height: 100%;
         width: 100%;
+        object-fit: contain;
+        /* Object-fit polyfill */
+        font-family: 'object-fit: contain;';
     }
 
     @include lazy-loaded-padding('product_size');
@@ -79,6 +82,7 @@
         max-height: 50px;
         max-width: 50px;
         width: 100%;
+        object-fit: contain;
     }
 }
 

package-lock.json

@@ -17,6 +17,7 @@
     "lodash": "^4.17.4",
     "nanobar": "^0.4.2",
     "nod-validate": "^2.0.12",
+    "object-fit-images": "^3.2.4",
     "slick-carousel": "^1.8.1",
     "svg-injector": "^1.1.3",
     "sweetalert2": "^6.11.5"