diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index f3c8b26..4fa2291 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -413,6 +413,7 @@ body {
 .docs-example-group .example-wrap img {
   display: block;
   width: 100%;
+  height: auto;
 }
 
 code {
diff --git a/docs/examples.html b/docs/examples.html
index f116867..45ba7a1 100644
--- a/docs/examples.html
+++ b/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>
diff --git a/docs/examples/app-movies/index.html b/docs/examples/app-movies/index.html
index 98dc833..f160fbc 100644
--- a/docs/examples/app-movies/index.html
+++ b/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>
diff --git a/sass/docs.scss b/sass/docs.scss
index 7a024eb..f089c3c 100644
--- a/sass/docs.scss
+++ b/sass/docs.scss
@@ -409,6 +409,7 @@ body {
     img {
       display: block;
       width: 100%;
+      height: auto;
     }
   }
 }