Fix incorrect aspect ratio on IE11

e2a93ec0 · ysds · Martijn Cuppens · 6e638685 · e2a93ec0
Commit e2a93ec0 authored 5 years ago by ysds Committed by Martijn Cuppens 5 years ago
Hide whitespace changes
Inline Side-by-side

Showing

with 6 additions and 5 deletions
+6 -5
--- 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);
 }