Card image fixes (#22288)

* fix image stretching due to flexbox
* fix broke text-muted on dark bg
* no img-fluid needed

diff --git a/docs/components/card.md b/docs/components/card.md
index dc8a921b85ecd2983fdecb0158c36643e9379746..74debae448b69cc451f20d05f6b5b960f7ef9b64 100644 (file)
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -359,7 +359,7 @@ Turn an image into a card background and overlay your card's text. Depending on
   <div class="card-img-overlay">
     <h4 class="card-title">Card title</h4>
     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+    <p class="card-text">Last updated 3 mins ago</p>
   </div>
 </div>
 {% endexample %}
@@ -644,7 +644,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
 {% example html %}
 <div class="card-columns">
   <div class="card">
-    <img class="card-img-top img-fluid" data-src="holder.js/100px160/" alt="Card image cap">
+    <img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
     <div class="card-block">
       <h4 class="card-title">Card title that wraps to a new line</h4>
       <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -661,7 +661,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
     </blockquote>
   </div>
   <div class="card">
-    <img class="card-img-top img-fluid" data-src="holder.js/100px160/" alt="Card image cap">
+    <img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
     <div class="card-block">
       <h4 class="card-title">Card title</h4>
       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
@@ -686,7 +686,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
     </div>
   </div>
   <div class="card">
-    <img class="card-img img-fluid" data-src="holder.js/100px260/" alt="Card image">
+    <img class="card-img" data-src="holder.js/100px260/" alt="Card image">
   </div>
   <div class="card p-3 text-right">
     <blockquote class="card-blockquote">

diff --git a/scss/_card.scss b/scss/_card.scss
index 9fe70e8cf6d262e4c6de6e8529c9b74f65c7897e..99f7c21958c815812d299e6f9d4e5ead9acfee11 100644 (file)
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -158,10 +158,6 @@
 }
 
 // Card image
-.card-img {
-  // margin: -1.325rem;
-  @include border-radius($card-border-radius-inner);
-}
 .card-img-overlay {
   position: absolute;
   top: 0;
@@ -171,13 +167,19 @@
   padding: $card-img-overlay-padding;
 }
 
-
+.card-img {
+  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
+  @include border-radius($card-border-radius-inner);
+}
 
 // Card image caps
 .card-img-top {
+  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
   @include border-top-radius($card-border-radius-inner);
 }
+
 .card-img-bottom {
+  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
   @include border-bottom-radius($card-border-radius-inner);
 }