Fix incorrect aspect ratio on IE11

diff --git a/scss/_card.scss b/scss/_card.scss
index 6fae8b405e1e875d6fa669bedf6ffdd844a81f82..d6759fde685feca92c448bb6ef1a2c617065edbe 100644 (file)
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -125,19 +125,20 @@
   padding: $card-img-overlay-padding;
 }
 
-.card-img {
+.card-img,
+.card-img-top,
+.card-img-bottom {
+  flex-shrink: 0; // For IE: https://github.com/twbs/bootstrap/issues/29396
   width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
-  @include border-radius($card-inner-border-radius);
 }
 
-// Card image caps
+.card-img,
 .card-img-top {
-  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
   @include border-top-radius($card-inner-border-radius);
 }
 
+.card-img,
 .card-img-bottom {
-  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
   @include border-bottom-radius($card-inner-border-radius);
 }