Add comments explaining why we don't make `<img>`s responsive by default
Refs #18178 [ci skip]
This commit is contained in:
parent
4d17a04a27
commit
be1232c580
|
@ -1,4 +1,10 @@
|
||||||
// Responsive images (ensure images don't scale beyond their parents)
|
// 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 {
|
.img-fluid {
|
||||||
@include img-fluid();
|
@include img-fluid();
|
||||||
}
|
}
|
||||||
|
|
|
@ -191,6 +191,8 @@ img {
|
||||||
// By default, `<img>`s are `inline-block`. This assumes that, and vertically
|
// 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.
|
// centers them. This won't apply should you reset them to `block` level.
|
||||||
vertical-align: middle;
|
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.
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue