fix image aspect ratio when scaling, again

also when image hasn't loaded yet to prevent scroll position jumps

src/ui/web/css/timeline.css

@@ -27,10 +27,23 @@
     font-weight: bold;
 }
 
-.message-container img {
+.message-container a {
-    max-width: 100%;
-    height: 100%;
     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: 100%;
 }
 
 .TextMessageView {

src/ui/web/session/room/timeline/ImageView.js

@@ -2,12 +2,26 @@ 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",
+            alt: vm.label,
+        });
+        const linkContainer = t.a({
+            href: vm.url,
+            target: "_blank",
+            style: `padding-top: ${heightRatioPercent}%; width: ${vm.thumbnailWidth}px;`
+        }, image);
+
         return t.li(
             {className: {"TextMessageView": true, own: vm.isOwn, pending: vm.isPending}},
             t.div({className: "message-container"}, [
                 t.div({className: "sender"}, vm => vm.isContinuation ? "" : vm.sender),
-                t.div(t.a({href: vm.url, target: "_blank"},
+                t.div(linkContainer),
-                    t.img({src: vm.thumbnailUrl, width: vm.thumbnailWidth, height: vm.thumbnailHeight, loading: "lazy", alt: vm.label}))),
                 t.p(t.time(vm.date + " " + vm.time)),
             ])
         );