rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

Remove display from the .img-fluid utility

Browse Source 
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. // which weren't expecting the images within themselves to be involuntarily resized.
// See also https://github.com/twbs/bootstrap/issues/18178 // See also https://github.com/twbs/bootstrap/issues/18178
.img-fluid { .img-fluid {
@include img-fluid(); @include img-fluid;
} }
@ -20,7 +20,7 @@
@include box-shadow($thumbnail-box-shadow); @include box-shadow($thumbnail-box-shadow);
// Keep them at most 100% wide // 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. // Keep images from scaling beyond the width of their parents.
@mixin img-fluid($display: block) { @mixin img-fluid {
display: $display; // Part 1: Set a maximum relative to the parent
max-width: 100%; // Part 1: Set a maximum relative to the parent max-width: 100%;
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching // 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;
} }