Overall responsive `img` styles

`img`s are no longer responsive by default. Instead, use
`.img-responsive` as a class or mixin. Existing `.thumbnail > img` and
`.img-thumbnail` classes now make use of this as a mixin as well.

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index bffe638eea7920fce449fe47430223747ca99039..9f037b333860ce6f297b7193d9df103a4971d6dc 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -325,9 +325,13 @@ a:focus {
 }
 
 img {
+  vertical-align: middle;
+}
+
+.img-responsive {
+  display: block;
   height: auto;
   max-width: 100%;
-  vertical-align: middle;
 }
 
 .img-rounded {
@@ -3958,6 +3962,13 @@ button.close {
           transition: all 0.2s ease-in-out;
 }
 
+.thumbnail > img,
+.img-thumbnail {
+  display: block;
+  height: auto;
+  max-width: 100%;
+}
+
 .thumbnail {
   display: block;
 }
@@ -3972,8 +3983,6 @@ a.thumbnail:focus {
 }
 
 .thumbnail > img {
-  display: block;
-  max-width: 100%;
   margin-right: auto;
   margin-left: auto;
 }

diff --git a/less/scaffolding.less b/less/scaffolding.less
index e74a4db1c6de8992a70a0d05795b282fe179e4ae..79447c3f5b1a85ee1950d92b2138ea403631467b 100644 (file)
--- a/less/scaffolding.less
+++ b/less/scaffolding.less
@@ -59,12 +59,14 @@ a:focus {
 // -------------------------
 
 img {
-  // Responsive images (ensure images don't scale beyond their parents)
+  vertical-align: middle;
+}
+
+// Responsive images (ensure images don't scale beyond their parents)
+.img-responsive {
+  display: block;
   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
-
-  // Match vertical alignment with other comment elements
-  vertical-align: middle;
 }
 
 // Rounded corners

diff --git a/less/thumbnails.less b/less/thumbnails.less
index f31d78617f0845e4e6e7551c603ba89acb5f3ca9..b15b8d25abb8a29cc1e76a6ae1601b4119a96530 100644 (file)
--- a/less/thumbnails.less
+++ b/less/thumbnails.less
@@ -17,6 +17,10 @@
   border-radius: @thumbnail-border-radius;
   .transition(all .2s ease-in-out);
 }
+.thumbnail > img,
+.img-thumbnail {
+  .img-responsive();
+}
 .thumbnail {
   display: block;
 }
@@ -32,8 +36,6 @@ a.thumbnail:focus {
 
 // Images and captions
 .thumbnail > img {
-  display: block;
-  max-width: 100%;
   margin-left: auto;
   margin-right: auto;
 }