From cb10d40c3ad649c87ad29286fe5645df31d451b9 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Wed, 12 Aug 2020 16:47:07 +0200
Subject: [PATCH] Revert "use intrinsic aspect-ratio supported by chrome and
 firefox (although not safari)"

This reverts commit 0e5ad9805ae4a302a1a5b2a1c1a0a3b5c905faee.

It does not seem to work anymore in FF & chrome (the tile grows after the image is loaded)
and this won't work in IE11 anyways
---
 src/ui/web/css/timeline.css                   | 21 ++++++++++++++++++-
 src/ui/web/session/room/timeline/ImageView.js |  6 ++++--
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/ui/web/css/timeline.css b/src/ui/web/css/timeline.css
index db7574f7..69e96e58 100644
--- a/src/ui/web/css/timeline.css
+++ b/src/ui/web/css/timeline.css
@@ -33,10 +33,29 @@ limitations under the License.
     word-break: break-word;
 }
 
+.message-container .sender {
+    margin: 5px 0;
+    font-size: 0.9em;
+    font-weight: bold;
+}
+
+.message-container a {
+    display: block;
+    position: relative;
+    max-width: 100%;
+    /* width and padding-top set inline to maintain aspect ratio,
+    replace with css aspect-ratio once supported */
+}
+
 .message-container img {
     display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
     width: 100%;
-    height: auto;
+    height: 100%;
 }
 
 .TextMessageView {
diff --git a/src/ui/web/session/room/timeline/ImageView.js b/src/ui/web/session/room/timeline/ImageView.js
index 1c4c6d82..d5f9279f 100644
--- a/src/ui/web/session/room/timeline/ImageView.js
+++ b/src/ui/web/session/room/timeline/ImageView.js
@@ -18,17 +18,19 @@ import {TemplateView} from "../../../general/TemplateView.js";
 
 export class ImageView extends TemplateView {
     render(t, vm) {
+        // replace with css aspect-ratio once supported
+        const heightRatioPercent = (vm.thumbnailHeight / vm.thumbnailWidth) * 100;
         const image = t.img({
             src: vm.thumbnailUrl,
             width: vm.thumbnailWidth,
             height: vm.thumbnailHeight,
             loading: "lazy",
-            style: `max-width: ${vm.thumbnailWidth}px`,
             alt: vm.label,
         });
         const linkContainer = t.a({
             href: vm.url,
-            target: "_blank"
+            target: "_blank",
+            style: `padding-top: ${heightRatioPercent}%; width: ${vm.thumbnailWidth}px;`
         }, image);
 
         return t.li(