1 files changed, 29 insertions, 22 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index aa33c9333..afb54056c 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -353,35 +353,42 @@
 
 .image-loader {
   position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-  &.image-loader--loading {
-    .image-loader__preview-canvas {
-      filter: blur(2px);
-    }
+  .image-loader__preview-canvas {
+    max-width: $media-modal-media-max-width;
+    max-height: $media-modal-media-max-height;
+    background: url('~images/void.png') repeat;
+    object-fit: contain;
   }
 
-  .image-loader__img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    max-width: 100%;
-    max-height: 100%;
-    background-image: none;
+  &.image-loader--loading .image-loader__preview-canvas {
+    filter: blur(2px);
   }
 
-  &.image-loader--amorphous {
-    position: static;
+  &.image-loader--amorphous .image-loader__preview-canvas {
+    display: none;
+  }
+}
 
-    .image-loader__preview-canvas {
-      display: none;
-    }
+.zoomable-image {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-    .image-loader__img {
-      position: static;
-      width: auto;
-      height: auto;
-    }
+  img {
+    max-width: $media-modal-media-max-width;
+    max-height: $media-modal-media-max-height;
+    width: auto;
+    height: auto;
+    object-fit: contain;
   }
 }