From a7cd5fc49b598cb6ca71f10665720acaa1b9eae4 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Wed, 21 Jul 2021 10:03:10 +0200
Subject: [PATCH] Shift thumbnail dislay to use object-fit to preserve
 aspect-ratio

---
 res/css/views/messages/_MImageBody.scss      | 6 +-----
 src/components/views/messages/MImageBody.tsx | 1 -
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss
index 0a199c1f45..f5d8131e6e 100644
--- a/res/css/views/messages/_MImageBody.scss
+++ b/res/css/views/messages/_MImageBody.scss
@@ -21,11 +21,7 @@ $timelineImageBorderRadius: 4px;
 }
 
 .mx_MImageBody_thumbnail {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
+    object-fit: contain;
     border-radius: $timelineImageBorderRadius;
 
     display: flex;
diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx
index 81b6cd634a..75fe642847 100644
--- a/src/components/views/messages/MImageBody.tsx
+++ b/src/components/views/messages/MImageBody.tsx
@@ -362,7 +362,6 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         const thumbnail = (
             <div className="mx_MImageBody_thumbnail_container" style={{ maxHeight: maxHeight + "px", maxWidth: maxWidth + "px" }} >
                 { /* Calculate aspect ratio, using %padding will size _container correctly */ }
-                <div style={{ paddingBottom: forcedHeight ? (forcedHeight + "px") : ((100 * infoHeight / infoWidth) + '%') }} />
                 { showPlaceholder &&
                     <div className="mx_MImageBody_thumbnail" style={{
                         // Constrain width here so that spinner appears central to the loaded thumbnail