Images are responsive by default

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 90aee7ad959d0d604bfa4aea8489feab14340484..7c045a1e9b031f5c7eeadcd4d3b2b24388c24272 100644 (file)
--- 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 a6abc862d114e568939ce4247b7456bcb3d1b98e..27e09e96f6087e3d0a3ef6ddc76f05e740e7feaf 100644 (file)
--- 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 bec9626f60c93c982a1d7c70b7b43b191777a76a..9ff91370daa964f9959965db49ff886ee77b6149 100644 (file)
--- 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.