diff options
| author | Chris Rebert <[email protected]> | 2015-03-28 04:06:22 -0700 |
|---|---|---|
| committer | Chris Rebert <[email protected]> | 2015-03-28 04:06:22 -0700 |
| commit | 763d77e210e8746120a9c0a0fe8cf7246909ae10 (patch) | |
| tree | 954c986104ebfcc926debd5d7aeda4641c386166 | |
| parent | 321c3b66bb6e815e8c7e19f5ee7fc8b854fefead (diff) | |
| download | bootstrap-763d77e210e8746120a9c0a0fe8cf7246909ae10.tar.xz bootstrap-763d77e210e8746120a9c0a0fe8cf7246909ae10.zip | |
Revert "Images are responsive by default"
This reverts commit d29f851e827db27fb42573f14003bb018c037342.
Making <img>s responsive by-default without opt-in can severely break
third-party widgets such as Google Maps.
This was an acknowledged problem in Bootstrap v2
(see https://github.com/twbs/bootstrap/issues/1506 ) and was fixed in v3
by requiring the .img-responsive class for explicit opt-in
(see 09cdee2f03aaad5c5a767fbec2e3896ad3d1f980).
The situation hasn't really changed since then. The responsive-by-default
approach hasn't become any more suitable in the intervening time.
So let's avoid having this regress in v4. :-)
| -rw-r--r-- | scss/_carousel.scss | 2 | ||||
| -rw-r--r-- | scss/_scaffolding.scss | 11 | ||||
| -rw-r--r-- | scss/mixins/_image.scss | 16 |
3 files changed, 23 insertions, 6 deletions
diff --git a/scss/_carousel.scss b/scss/_carousel.scss index 7c045a1e9..90aee7ad9 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -21,7 +21,7 @@ // Account for jankitude on images > img, > a > img { - // @extend .img-responsive; + @extend .img-responsive; line-height: 1; } diff --git a/scss/_scaffolding.scss b/scss/_scaffolding.scss index 27e09e96f..a6abc862d 100644 --- a/scss/_scaffolding.scss +++ b/scss/_scaffolding.scss @@ -86,13 +86,14 @@ a { // Images img { - // Make them responsive with `max-width` and `height` - max-width: 100%; - height: auto; - // Match vertical alignment of most other Bootstrapped elements vertical-align: middle; } +// Responsive images (ensure images don't scale beyond their parents) +.img-responsive { + @include img-responsive(); +} + // Rounded corners .img-rounded { @include border-radius($border-radius-lg); @@ -109,7 +110,7 @@ img { @include box-shadow(0 1px 2px rgba(0,0,0,.075)); // Keep them at most 100% wide - // @include img-responsive(inline-block); + @include img-responsive(inline-block); } // Perfect circle diff --git a/scss/mixins/_image.scss b/scss/mixins/_image.scss index 9ff91370d..bec9626f6 100644 --- a/scss/mixins/_image.scss +++ b/scss/mixins/_image.scss @@ -1,3 +1,19 @@ +// Image Mixins +// - Responsive image +// - Retina image + + +// Responsive image +// +// Keep images from scaling beyond the width of their parents. + +@mixin img-responsive($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 +} + + // Retina image // // Short retina mixin for setting background-image and -size. |