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

diff --git a/scss/_images.scss b/scss/_images.scss
index 3ca811ecd9434d80fa6ed735a3bee805c8dbc122..3cdedc4ffc3ef6c77d10a66bfb487195e31bb9bb 100644 (file)
--- 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 91d2f59eea5815a2910cba1d24c8eed3264c274e..c2b45f2ceadf974db39e4b4b6d3e592785bffb05 100644 (file)
--- 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;
 }