Commit d29f851e authored by Mark Otto's avatar Mark Otto
Browse files

Images are responsive by default

parent 928cfb06
48 merge requests!28721Hot test,!27561Adds font-weight-medium to font weight classes,!26437merge,!26197V4 dev xmr,!20778V4 dev,!20539Allow multiple modals,!18047#17986,!18988Blockquote border width,!20854Fixes 15534,!19272V4 dev xmr grunt html,!17218Issue 17066,!19581V4 fix popover,!18283Tether docs fix,!17229Include documentation for .navbar-static-top,!20493V4 dev display,!20636Fix docs for heading sizes,!19824blockquote-center,!22547Finished a new translation for bootstrap,!19534Docs 17264,!19533Npm deps,!22143Fix selectable disabled toggle radio buttons,!19084V4 rhythm,!18085Ie9 click comment,!22598test,!18829Add prefix to carousel classes,!18581Check getting started files for broken links - Issue 18568,!18067replace grunt-autoprefixer with gruntpostcss + autoprefixer,!20099V4.0.0 alpha.3,!20438V4 grid classes,!17307Vertical alignment on Bootstrap columns with equal height,!18477add utility color-contrast function,!18864Feature/navbar toggler support color schemes,!19602V4 palettes arun,!18311V4 dev xmr,!19448New pull request for testing,!19358XXL grid size,!19825.blockquote-center,!17508Fix usage of “its” and “it’s” (v4 docs),!25326Adjust examples,!23995Add back cursor: pointer for .btn-link,!23178Spinner,!19754Issue template,!19753Card img overlay padding,!19747Blockquote border width,!19580ExitStars,!18684Docs: change "Button" to "Go somewhere",!18661Docs: accessibility fix-up of collapsible content navbar, change site-wide main navbar,!17021v4
Showing with 6 additions and 23 deletions
+6 -23
......@@ -21,7 +21,7 @@
// Account for jankitude on images
> img,
> a > img {
@extend .img-responsive;
// @extend .img-responsive;
line-height: 1;
}
......
......@@ -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
......
// 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.
......
Supports Markdown
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