IE11 doesn't calculate padding percentages based on parent width in grid

so do progressive fallback. This won't scale the height of the
image tile height, but it will still scale the thumbnail
on narrow viewports, leaving a blank space underneath the image.

src/platform/web/ui/css/themes/element/theme.css

@@ -543,9 +543,7 @@ ul.Timeline > li.messageStatus .message-container > p {
 .message-container .picture {
     display: grid;
     text-decoration: none;
-    overflow: hidden;
     margin-top: 4px;
-    border-radius: 4px;
     width: 100%;
 }
 
@@ -559,6 +557,9 @@ so the timeline doesn't jump when the image loads */
 .message-container .picture > img {
     width: 100%;
     height: auto;
+    /* for IE11 to still scale even though the spacer is too tall */
+    align-self: start;
+    border-radius: 4px;
 }
 
 .message-container .picture > time {
@@ -572,7 +573,9 @@ so the timeline doesn't jump when the image loads */
     border-radius: 4px;
 }
 .message-container .picture > .spacer {
+    /* TODO: can we implement this with a pseudo element? or perhaps they are not grid items? */
     width: 100%;
+    align-self: start;
 }
 
 .TextMessageView.pending .message-container {

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

@@ -20,9 +20,20 @@ import {renderMessage} from "./common.js";
 export class ImageView extends TemplateView {
     render(t, vm) {
         const heightRatioPercent = (vm.thumbnailHeight / vm.thumbnailWidth) * 100; 
+        let spacerStyle = `padding-top: ${heightRatioPercent}%;`;
+        if (vm.platform.isIE11) {
+            // preserving aspect-ratio in a grid with padding percentages
+            // does not work in IE11, so we assume people won't use it
+            // with viewports narrower than 400px where thumbnails will get
+            // scaled. If they do, the thumbnail will still scale, but
+            // there will be whitespace underneath the picture
+            // An alternative would be to use position: absolute but that
+            // can slow down rendering, and was bleeding through the lightbox.
+            spacerStyle = `height: ${vm.thumbnailHeight}px`;
+        }
         return renderMessage(t, vm, [
             t.a({href: vm.lightboxUrl, className: "picture", style: `max-width: ${vm.thumbnailWidth}px`}, [
-                t.div({className: "spacer", style: `padding-top: ${heightRatioPercent}%;`}),
+                t.div({className: "spacer", style: spacerStyle}),
                 t.img({
                     loading: "lazy",
                     src: vm => vm.thumbnailUrl,