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

fixes #9582: restore img-responsive as a class and move it's mixin to mixins.less

Browse Source
This commit is contained in:
Mark Otto 2013-08-15 00:46:18 -07:00
parent 1b6a5bbca2
commit fee3f1e733
4 changed files with 26 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
dist/css/bootstrap.css vendored
View File

@ -344,6 +344,12 @@ img {
vertical-align: middle; vertical-align: middle;
} }
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
.img-rounded { .img-rounded {
border-radius: 6px; border-radius: 6px;
} }

2
dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

23
less/mixins.less
View File

@ -294,10 +294,10 @@
// RETINA IMAGE SUPPORT // Retina images
// -------------------------------------------------- //
// Short retina mixin for setting background-image and -size // Short retina mixin for setting background-image and -size
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) { .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}"); background-image: url("@{file-1x}");
@ -314,6 +314,17 @@
} }
// Responsive image
//
// Keep images from scaling beyond the width of their parents.
.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
}
// COMPONENT MIXINS // COMPONENT MIXINS
// -------------------------------------------------- // --------------------------------------------------
@ -376,7 +387,7 @@
border-color: @border; border-color: @border;
} }
} }
// Hover states for `.table-hover` // Hover states for `.table-hover`
// Note: this is not available for cells or rows within `thead` or `tfoot`. // Note: this is not available for cells or rows within `thead` or `tfoot`.
.table-hover > tbody > tr { .table-hover > tbody > tr {
@ -710,12 +721,12 @@
font-size: @font-size; font-size: @font-size;
line-height: @line-height; line-height: @line-height;
border-radius: @border-radius; border-radius: @border-radius;
select& { select& {
height: @input-height; height: @input-height;
line-height: @input-height; line-height: @input-height;
} }
textarea& { textarea& {
height: auto; height: auto;
} }

6
less/scaffolding.less
View File

@ -73,10 +73,8 @@ img {
} }
// Responsive images (ensure images don't scale beyond their parents) // Responsive images (ensure images don't scale beyond their parents)
.img-responsive(@display: block;) { .img-responsive {
display: @display; .img-responsive();
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
} }
// Rounded corners // Rounded corners