Fix incorrect aspect ratio on IE11

ysds · XhmikosR · commit db19e8c70631 · 2019-10-14T12:12:05.000+03:00
diff --git 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);
 }
 

Original file line number	Diff line number	Diff line change
`@@ -125,19 +125,20 @@`
`125`	`125`	`padding: $card-img-overlay-padding;`
`126`	`126`	`}`
`127`	`127`
`128`		`-.card-img {`
	`128`	`+.card-img,`
	`129`	`+.card-img-top,`
	`130`	`+.card-img-bottom {`
	`131`	`+ flex-shrink: 0; // For IE: https://github.com/twbs/bootstrap/issues/29396`
`129`	`132`	`width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch`
`130`		`- @include border-radius($card-inner-border-radius);`
`131`	`133`	`}`
`132`	`134`
`133`		`-// Card image caps`
	`135`	`+.card-img,`
`134`	`136`	`.card-img-top {`
`135`		`- width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch`
`136`	`137`	`@include border-top-radius($card-inner-border-radius);`
`137`	`138`	`}`
`138`	`139`
	`140`	`+.card-img,`
`139`	`141`	`.card-img-bottom {`
`140`		`- width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch`
`141`	`142`	`@include border-bottom-radius($card-inner-border-radius);`
`142`	`143`	`}`
`143`	`144`