kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

Remove display from the .img-fluid utility 

Creating max-width images is not dependent on the display, so setting it is redundant. Cleans up the comments and implementation of the mixin as well.

Fixes #20767
This commit is contained in:
Mark Otto 2016-10-09 14:14:39 -07:00
parent 3dc4b3647c
commit 88bf5af896
2 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
scss/_images.scss
View File

@ -6,7 +6,7 @@
// which weren't expecting the images within themselves to be involuntarily resized.
// See also https://github.com/twbs/bootstrap/issues/18178
.img-fluid {
@include img-fluid();
@include img-fluid;
}
@ -20,7 +20,7 @@
@include box-shadow($thumbnail-box-shadow);
// Keep them at most 100% wide
@include img-fluid(inline-block);
@include img-fluid;
}
//

10
scss/mixins/_image.scss
View File

@ -7,10 +7,12 @@
//
// Keep images from scaling beyond the width of their parents.
@mixin img-fluid($display: block) {
display: $display;
max-width: 100%; // Part 1: Set a maximum relative to the parent
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
@mixin img-fluid {
// Part 1: Set a maximum relative to the parent
max-width: 100%;
// Part 2: Override the height to auto, otherwise images will be stretched
// when setting a width and height attribute on the img element.
height: auto;
}