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

This reverts commit 0e5ad9805a.

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

@@ -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 {

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(