Commit d29f851e authored by Mark Otto's avatar Mark Otto

Images are responsive by default

parent 928cfb06
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
// Account for jankitude on images // Account for jankitude on images
> img, > img,
> a > img { > a > img {
@extend .img-responsive; // @extend .img-responsive;
line-height: 1; line-height: 1;
} }
......
...@@ -86,14 +86,13 @@ a { ...@@ -86,14 +86,13 @@ a {
// Images // Images
img { 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; vertical-align: middle;
} }
// Responsive images (ensure images don't scale beyond their parents)
.img-responsive {
@include img-responsive();
}
// Rounded corners // Rounded corners
.img-rounded { .img-rounded {
@include border-radius($border-radius-lg); @include border-radius($border-radius-lg);
...@@ -110,7 +109,7 @@ img { ...@@ -110,7 +109,7 @@ img {
@include box-shadow(0 1px 2px rgba(0,0,0,.075)); @include box-shadow(0 1px 2px rgba(0,0,0,.075));
// Keep them at most 100% wide // Keep them at most 100% wide
@include img-responsive(inline-block); // @include img-responsive(inline-block);
} }
// Perfect circle // Perfect circle
......
// 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 // Retina image
// //
// Short retina mixin for setting background-image and -size. // Short retina mixin for setting background-image and -size.
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment