From d29f851e827db27fb42573f14003bb018c037342 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Wed, 11 Mar 2015 19:19:03 +0000
Subject: [PATCH] Images are responsive by default
---
scss/_carousel.scss | 2 +-
scss/_scaffolding.scss | 11 +++++------
scss/mixins/_image.scss | 16 ----------------
3 files changed, 6 insertions(+), 23 deletions(-)
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 90aee7ad95..7c045a1e9b 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 a6abc862d1..27e09e96f6 100644
--- a/scss/_scaffolding.scss
+++ b/scss/_scaffolding.scss
@@ -86,14 +86,13 @@ 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);
@@ -110,7 +109,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 bec9626f60..9ff91370da 100644
--- a/scss/mixins/_image.scss
+++ b/scss/mixins/_image.scss
@@ -1,19 +1,3 @@
-// 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