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;