From 763d77e210e8746120a9c0a0fe8cf7246909ae10 Mon Sep 17 00:00:00 2001
From: Chris Rebert <code@rebertia.com>
Date: Sat, 28 Mar 2015 04:06:22 -0700
Subject: [PATCH] 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. :-)
---
scss/_carousel.scss | 2 +-
scss/_scaffolding.scss | 11 ++++++-----
scss/mixins/_image.scss | 16 ++++++++++++++++
3 files changed, 23 insertions(+), 6 deletions(-)
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 7c045a1e9b..90aee7ad95 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 27e09e96f6..a6abc862d1 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 9ff91370da..bec9626f60 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.
--
GitLab