Fix tall images on PDPs and PLPs

bookernath · bookernath · commit 92c3038519a8 · 2019-08-13T14:19:52.000-05:00
diff --git a/assets/scss/components/citadel/cards/_cards.scss b/assets/scss/components/citadel/cards/_cards.scss
@@ -51,6 +51,7 @@
     border: 0;
     width: 100%;
     max-height: 100%;
+    object-fit: contain;
 }
 
 .card-title {
diff --git a/assets/scss/components/stencil/productView/_productView.scss b/assets/scss/components/stencil/productView/_productView.scss
@@ -49,6 +49,7 @@
         @include lazy-loaded-img;
         max-height: 100%;
         width: 100%;
+        object-fit: contain;
     }
 
     @include lazy-loaded-padding('product_size');
@@ -79,6 +80,7 @@
         max-height: 50px;
         max-width: 50px;
         width: 100%;
+        object-fit: contain;
     }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -49,6 +49,7 @@`
`49`	`49`	`@include lazy-loaded-img;`
`50`	`50`	`max-height: 100%;`
`51`	`51`	`width: 100%;`
	`52`	`+ object-fit: contain;`
`52`	`53`	`}`
`53`	`54`
`54`	`55`	`@include lazy-loaded-padding('product_size');`
`@@ -79,6 +80,7 @@`
`79`	`80`	`max-height: 50px;`
`80`	`81`	`max-width: 50px;`
`81`	`82`	`width: 100%;`
	`83`	`+ object-fit: contain;`
`82`	`84`	`}`
`83`	`85`	`}`
`84`	`86`