use intrinsic aspect-ratio supported by chrome and firefox (although not safari)

src/ui/web/css/timeline.css

@@ -27,23 +27,10 @@
     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: 100%;
+    height: auto;
 }
 
 .TextMessageView {

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

@@ -2,19 +2,17 @@ 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",
-            style: `padding-top: ${heightRatioPercent}%; width: ${vm.thumbnailWidth}px;`
+            target: "_blank"
         }, image);
 
         return t.li(