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.