Commit cfd9c30e authored by Chris Rebert's avatar Chris Rebert
Browse files

Merge pull request #18182 from twbs/img-fluid-doc

Add comments explaining why we don't make `<img>`s responsive by default
parents 91005397 be1232c5
40 merge requests!28721Hot test,!27561Adds font-weight-medium to font weight classes,!26437merge,!26197V4 dev xmr,!20778V4 dev,!20539Allow multiple modals,!18988Blockquote border width,!20854Fixes 15534,!19272V4 dev xmr grunt html,!19581V4 fix popover,!18283Tether docs fix,!20493V4 dev display,!20636Fix docs for heading sizes,!19824blockquote-center,!22547Finished a new translation for bootstrap,!19534Docs 17264,!19533Npm deps,!22143Fix selectable disabled toggle radio buttons,!19084V4 rhythm,!22598test,!18829Add prefix to carousel classes,!18581Check getting started files for broken links - Issue 18568,!20099V4.0.0 alpha.3,!18477add utility color-contrast function,!18864Feature/navbar toggler support color schemes,!19602V4 palettes arun,!18311V4 dev xmr,!19448New pull request for testing,!19358XXL grid size,!19825.blockquote-center,!25326Adjust examples,!23995Add back cursor: pointer for .btn-link,!23178Spinner,!19754Issue template,!19753Card img overlay padding,!19747Blockquote border width,!19580ExitStars,!18684Docs: change "Button" to "Go somewhere",!18661Docs: accessibility fix-up of collapsible content navbar, change site-wide main navbar,!17021v4
Showing with 8 additions and 0 deletions
+8 -0
// 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 { ...@@ -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.
} }
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment