Add comments explaining why we don't make `<img>`s responsive by default

Refs #18178

[ci skip]

diff --git a/scss/_images.scss b/scss/_images.scss
index eb7b4ce1849df4a5bfe529c86eb6bdfd7848ed1a..4f1ce65077345d93fa4c75fff82e9a5bd07448dc 100644 (file)
--- a/scss/_images.scss
+++ b/scss/_images.scss
@@ -1,4 +1,10 @@
 // Responsive images (ensure images don't scale beyond their parents)
+//
+// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
+// We previously tried the "images are responsive by default" approach in Bootstrap v2,
+// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
+// 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();
 }

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 7c527851969280e7f9dc4b05b5df14534227b1f5..0da7e5ea6b60e5e2c74d68b0e85acebbae701d78 100644 (file)
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -191,6 +191,8 @@ img {
   // By default, `<img>`s are `inline-block`. This assumes that, and vertically
   // centers them. This won't apply should you reset them to `block` level.
   vertical-align: middle;
+  // Note: `<img>`s are deliberately not made responsive by default.
+  // For the rationale behind this, see the comments on the `.img-fluid` class.
 }