diff options
| -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 6f6650b77..5d4652ead 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. |