diff --git a/res/css/views/elements/_ImageView.scss b/res/css/views/elements/_ImageView.scss
index c87cfd1ece..1fcf1bf543 100644
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@@ -33,17 +33,18 @@ limitations under the License.
 }
 
 .mx_ImageView_imageBox {
-    overflow: auto;
-    margin: 0 50px 50px 50px;
+    overflow: scroll;
     display: flex;
-    height: 100%;
+    flex-grow: 1;
+}
+
+.mainImage {
+    margin: auto;
 }
 
 .mx_ImageView_content img {
     object-fit: contain;
     pointer-events: all;
-    //margin: auto;
-    //margin: 0 auto 0 auto;
 }
 
 .mx_ImageView_panel {
diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index bc1d8b4d53..2feff97fef 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -163,6 +163,10 @@ export default class ImageView extends React.Component {
         };
 */
         let res;
+        const style = {
+            height: this.state.zoom + "%",
+            width: this.state.zoom + "%",
+        };
 
         if (this.props.width && this.props.height) {
             res = this.props.width + "x" + this.props.height + "px";
@@ -213,8 +217,7 @@ export default class ImageView extends React.Component {
         }
 
         const rotationDegrees = this.state.rotationDegrees;
-        const zoom = this.state.zoom/100;
-        const effectiveStyle = {transform: `rotate(${rotationDegrees}deg) scale(${zoom})`};
+        const effectiveStyle = {transform: `rotate(${rotationDegrees}deg)`, ...style};
 
         return (
             <FocusLock