mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-12 00:24:03 +02:00
Code Issues Releases Wiki Activity

v4: Card image fixes (#20667)

Browse Source 
* 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
This commit is contained in:
Mark Otto
2016-09-07 20:40:12 -07:00
committed by GitHub
parent 5413787e40
commit 07752bab7b
3 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/components/card.md
View File

@@ -517,7 +517,7 @@ Only applies to small devices and above.
{% example html %} {% example html %}
<div class="card-columns"> <div class="card-columns">
<div class="card"> <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"> <div class="card-block">
<h4 class="card-title">Card title that wraps to a new line</h4> <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> <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> </blockquote>
</div> </div>
<div class="card"> <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"> <div class="card-block">
<h4 class="card-title">Card title</h4> <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> <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> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div> </div>
<div class="card"> <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>
<div class="card card-block text-xs-right"> <div class="card card-block text-xs-right">
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">

2
scss/_card.scss
View File

@@ -168,7 +168,7 @@
// Card image // Card image
.card-img { .card-img {
// margin: -1.325rem; // margin: -1.325rem;
@include border-radius(.25rem); @include border-radius($card-border-radius-inner);
} }
.card-img-overlay { .card-img-overlay {
position: absolute; position: absolute;

2
scss/_variables.scss
View File

@@ -581,7 +581,7 @@ $card-spacer-y: .75rem !default;
$card-border-width: 1px !default; $card-border-width: 1px !default;
$card-border-radius: $border-radius !default; $card-border-radius: $border-radius !default;
$card-border-color: rgba(0,0,0,.125) !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-cap-bg: #f5f5f5 !default;
$card-bg: #fff !default; $card-bg: #fff !default;