diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css
index ff841a61..8a55e7dd 100644
--- a/src/platform/web/ui/css/themes/element/theme.css
+++ b/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 {
diff --git a/src/platform/web/ui/session/room/timeline/ImageView.js b/src/platform/web/ui/session/room/timeline/ImageView.js
index 00669a55..eb060e34 100644
--- a/src/platform/web/ui/session/room/timeline/ImageView.js
+++ b/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,