v4: Card image fixes (#20667)

* Add .img-fluid to card images in columns to ensure proper resizing
* change that variable from regular value to variable
* use calc to figure out a tighter border for card images

diff --git a/docs/components/card.md b/docs/components/card.md
index 992f4a138ece069c77ddf00d84c9a91bf8ab3ad1..1cf116d86917d437f5a4a374af99cc5314b5ca98 100644 (file)
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -517,7 +517,7 @@ Only applies to small devices and above.
 {% example html %}
 <div class="card-columns">
   <div class="card">
-    <img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
+    <img class="card-img-top img-fluid" 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>
@@ -534,7 +534,7 @@ Only applies to small devices and above.
     </blockquote>
   </div>
   <div class="card">
-    <img class="card-img-top" data-src="holder.js/100px160/" alt="Card image cap">
+    <img class="card-img-top img-fluid" 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>
@@ -557,7 +557,7 @@ Only applies to small devices and above.
     <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
   </div>
   <div class="card">
-    <img class="card-img" data-src="holder.js/100px260/" alt="Card image">
+    <img class="card-img img-fluid" data-src="holder.js/100px260/" alt="Card image">
   </div>
   <div class="card card-block text-xs-right">
     <blockquote class="card-blockquote">

diff --git a/scss/_card.scss b/scss/_card.scss
index 73b3b0e82010ff10a49f3c5ffe94980df84510cb..1644ae466cd73046dd310253216ae415bffd3868 100644 (file)
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -168,7 +168,7 @@
 // Card image
 .card-img {
   // margin: -1.325rem;
-  @include border-radius(.25rem);
+  @include border-radius($card-border-radius-inner);
 }
 .card-img-overlay {
   position: absolute;

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 05c008820d14c8ef800611c7c4df7d138e062d30..c8cdbb104ddc54ce275c6e55c67f2e37f689227e 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -581,7 +581,7 @@ $card-spacer-y:            .75rem !default;
 $card-border-width:        1px !default;
 $card-border-radius:       $border-radius !default;
 $card-border-color:        rgba(0,0,0,.125) !default;
-$card-border-radius-inner: $card-border-radius !default;
+$card-border-radius-inner: calc($card-border-radius - 1px) !default;
 $card-cap-bg:              #f5f5f5 !default;
 $card-bg:                  #fff !default;