rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-26 23: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
> img,
> a > img {
@extend .img-responsive;
// @extend .img-responsive;
line-height: 1;
}

11
scss/_scaffolding.scss
View File

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

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