rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-20 17:54:23 +01:00
Code Issues Actions Packages Releases Activity

Images are responsive by default

Browse Source
This commit is contained in:
Mark Otto 2015-03-11 19:19:03 +00:00
parent 928cfb0697
commit d29f851e82
3 changed files with 6 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
scss/_carousel.scss
View File

@ -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;
} }

11
scss/_scaffolding.scss
View File

@ -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 {
@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

16
scss/mixins/_image.scss
View File

@ -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 // Retina image
// //
// Short retina mixin for setting background-image and -size. // Short retina mixin for setting background-image and -size.