diff --git a/app/assets/javascripts/app/views/small_frame.js b/app/assets/javascripts/app/views/small_frame.js
index 071356a35..ba490ce91 100644
--- a/app/assets/javascripts/app/views/small_frame.js
+++ b/app/assets/javascripts/app/views/small_frame.js
@@ -39,7 +39,11 @@ app.views.SmallFrame = app.views.Base.extend({
       } else if(ratio < 0.75) {
         return "x2 height"
       } else {
-        return ""
+        if(ratio > 1) {
+          return "scale-vertical"
+        } else {
+          return "scale-horizontal"
+        }
       }
     }
   },
diff --git a/app/assets/stylesheets/new_styles/_canvas.scss b/app/assets/stylesheets/new_styles/_canvas.scss
index a2a38d0ca..2057f3028 100644
--- a/app/assets/stylesheets/new_styles/_canvas.scss
+++ b/app/assets/stylesheets/new_styles/_canvas.scss
@@ -71,11 +71,10 @@ body {
       position : absolute;
       overflow : hidden;
 
-      width : 100%;
       top : 0;
       left : 0;
 
-      width : 100%;
+      min-width : 100%;
 
       img {
         max-height : 100%;
@@ -104,4 +103,11 @@ body {
   &.x2.width .content img  { max-height: none; max-width: none; min-width: 100%; }
   &.x2.height .content img { max-width: none; max-height: none; min-height: 100%; }
 
+  &.scale-vertical .content img,
+  &.scale-vertical .content .image-container {height : 100%; max-width : none; }
+
+  &.scale-horizontal .content img,
+  &.scale-horizontal .content .image-container {width : 100%; max-height : none; }
+
+
 }