Merge pull request #333 from twbs/img-dimensions

Add image dimensions.

docs/assets/css/docs.css

@@ -441,6 +441,7 @@ body {
 .docs-example-group .example-wrap img {
   display: block;
   width: 100%;
+  height: auto;
 }
 
 code {

docs/examples.html

@@ -26,19 +26,19 @@ title: Examples · Ratchet
       <div class="docs-example-group">
         <div class="example-wrap">
           <a class="example" href="../examples/app-movies" data-ignore="push">
-            <img src="../assets/img/example.png" alt="Movie finder app example">
+            <img src="../assets/img/example.png" alt="Movie finder app example" width="640" height="480">
           </a>
           <h5>Movie finder</h5>
         </div>
         <div class="example-wrap">
           <a class="example" href="../examples/app-ios-mail" data-ignore="push">
-            <img src="../assets/img/example-ios.png" alt="iOS mail app example">
+            <img src="../assets/img/example-ios.png" alt="iOS mail app example" width="640" height="480">
           </a>
           <h5>iOS mail app</h5>
         </div>
         <div class="example-wrap">
           <a class="example" href="../examples/app-android-notes" data-ignore="push">
-            <img src="../assets/img/example-android.png" alt="Android notes app example">
+            <img src="../assets/img/example-android.png" alt="Android notes app example" width="640" height="480">
           </a>
           <h5>Android notes app</h5>
         </div>

docs/examples/app-movies/css/app.css

@@ -1,6 +1,8 @@
-.slider,
-.slider img {
+.slider {
   margin-bottom: 0;
+}
+.slider img {
+  width: auto;
   height: 150px;
 }
 .content-padded {

docs/examples/app-movies/index.html

@@ -28,13 +28,13 @@
       <div class="slider">
         <div class="slide-group">
           <div class="slide">
-            <img src="img/argo.png" alt="Argo">
+            <img src="img/argo.png" alt="Argo" width="640" height="300">
           </div>
           <div class="slide">
-             <img src="img/skyfall.png" alt="Skyfall">
+             <img src="img/skyfall.png" alt="Skyfall" width="640" height="300">
           </div>
           <div class="slide">
-             <img src="img/ralph.png" alt="Wreck-It Ralph">
+             <img src="img/ralph.png" alt="Wreck-It Ralph" width="640" height="300">
           </div>
         </div>
       </div>

sass/docs.scss

@@ -437,6 +437,7 @@ body {
     img {
       display: block;
       width: 100%;
+      height: auto;
     }
   }
 }