From 35a2e13085e05ff19e0a23778d8f467d58895810 Mon Sep 17 00:00:00 2001
From: Paul Clarke <paul@silverstripe.com>
Date: Thu, 21 Apr 2016 10:15:23 +1200
Subject: [PATCH] Added modifier for img --fits-space, will need to use js to
 detect so styles can be adapted

---
 admin/client/src/components/preview/index.js    |  2 +-
 admin/client/src/components/preview/styles.scss | 11 ++++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/admin/client/src/components/preview/index.js b/admin/client/src/components/preview/index.js
index cf78b9754..fd96b2511 100644
--- a/admin/client/src/components/preview/index.js
+++ b/admin/client/src/components/preview/index.js
@@ -14,7 +14,7 @@ class CampaignPreview extends SilverStripeComponent {
           <h3 className="preview__overlay-text">There is no preview available for this item.</h3>
         </div>
         <div className="preview__file-container panel-scrollable">
-          <img className="preview__file" src="http://placehold.it/250x150" />
+          <img className="preview__file--fits-space" src="http://placehold.it/250x150" />
         </div>
         <div className="toolbar--south">
           <div className="btn-toolbar">
diff --git a/admin/client/src/components/preview/styles.scss b/admin/client/src/components/preview/styles.scss
index 385a737a6..d83cb2aab 100644
--- a/admin/client/src/components/preview/styles.scss
+++ b/admin/client/src/components/preview/styles.scss
@@ -6,11 +6,16 @@
 .preview__file-container {
   height: calc(100% - #{$toolbar-total-height});
   text-align: center;
-}
-.preview__file {
   position: relative;
+}
+.preview__file { // TODO files smaller than the given space need to be detected via js to give class --fits-space
+
+}
+.preview__file--fits-space { 
+  position: absolute;
   top: 50%;
-  transform: translateY(-50%);
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 .preview__overlay {
   text-align: center;