Fix incorrect aspect ratio on IE11

diff --git a/scss/_card.scss b/scss/_card.scss
index 24c65bee0480ca7d84dff37e04c0515f0fc57bea..c4d046ca0aef1a80415cd93e31a2e71aab7a0dbb 100644 (file)
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -131,19 +131,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);
 }