diff --git a/web/media/encrypted-multimedia.react.js b/web/media/encrypted-multimedia.react.js
index 6005ab78b7..b4ebc4bef6 100644
--- a/web/media/encrypted-multimedia.react.js
+++ b/web/media/encrypted-multimedia.react.js
@@ -12,6 +12,7 @@ import { decryptMedia } from './encryption-utils.js';
 import LoadableVideo from './loadable-video.react.js';
 import css from './media.css';
 import LoadingIndicator from '../loading-indicator.react.js';
+import type { CSSStyle } from '../types/styles';
 
 type Props = {
   +blobURI: string,
@@ -21,7 +22,7 @@ type Props = {
   +thumbnailEncryptionKey?: ?string,
   +placeholderSrc?: ?string,
   +multimediaClassName?: string,
-  +elementStyle?: ?Shape<CSSStyleDeclaration>,
+  +elementStyle?: ?Shape<CSSStyle>,
 };
 
 function EncryptedMultimedia(props: Props): React.Node {
diff --git a/web/media/loadable-video.react.js b/web/media/loadable-video.react.js
index 3010813dd1..3c28123bdf 100644
--- a/web/media/loadable-video.react.js
+++ b/web/media/loadable-video.react.js
@@ -7,6 +7,7 @@ import type { Shape } from 'lib/types/core.js';
 
 import { decryptMedia } from './encryption-utils.js';
 import { preloadImage } from './media-utils.js';
+import type { CSSStyle } from '../types/styles';
 
 type ThumbnailSource =
   | {
@@ -20,7 +21,7 @@ type Props = {
   +uri: ?string,
   +thumbnailSource: ThumbnailSource,
   +thumbHashDataURL?: ?string,
-  +elementStyle?: ?Shape<CSSStyleDeclaration>,
+  +elementStyle?: ?Shape<CSSStyle>,
   +multimediaClassName?: string,
 };
 
diff --git a/web/media/media.css b/web/media/media.css
index 01834308ef..7aa36c2330 100644
--- a/web/media/media.css
+++ b/web/media/media.css
@@ -21,6 +21,10 @@ span.multimedia > .multimediaImage > video {
   max-height: 200px;
   max-width: 100%;
 }
+/* Prevent borders around images without src attribute */
+span.multimedia > .multimediaImage > img:not([src]) {
+  visibility: hidden;
+}
 span.multimedia > .multimediaImage svg.removeUpload {
   display: none;
   position: absolute;
diff --git a/web/media/multimedia.react.js b/web/media/multimedia.react.js
index a6bff8b16a..61853822bd 100644
--- a/web/media/multimedia.react.js
+++ b/web/media/multimedia.react.js
@@ -158,8 +158,7 @@ function Multimedia(props: Props): React.Node {
         ? `center / cover url(${placeholderImage})`
         : undefined,
       width: `${calculatedWidth}px`,
-      // height is limited by the max-height style in media.css
-      height: `${height}px`,
+      aspectRatio: `${width} / ${height}`,
     };
   }, [dimensions, placeholderImage]);
 
diff --git a/web/types/styles.js b/web/types/styles.js
new file mode 100644
index 0000000000..a8067198ec
--- /dev/null
+++ b/web/types/styles.js
@@ -0,0 +1,6 @@
+// @flow
+
+export type CSSStyle = {
+  ...CSSStyleDeclaration,
+  +aspectRatio?: string,
+};