diff --git a/scss/_images.scss b/scss/_images.scss index 3ca811ecd9..3cdedc4ffc 100644 --- a/scss/_images.scss +++ b/scss/_images.scss @@ -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; } // diff --git a/scss/mixins/_image.scss b/scss/mixins/_image.scss index 91d2f59eea..c2b45f2cea 100644 --- a/scss/mixins/_image.scss +++ b/scss/mixins/_image.scss @@ -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; }