diff --git a/web/media/encrypted-multimedia.react.js b/web/media/encrypted-multimedia.react.js
--- a/web/media/encrypted-multimedia.react.js
+++ b/web/media/encrypted-multimedia.react.js
@@ -21,7 +21,7 @@
   +thumbnailEncryptionKey?: ?string,
   +placeholderSrc?: ?string,
   +multimediaClassName?: string,
-  +elementStyle?: ?Shape<CSSStyleDeclaration>,
+  +elementStyle?: ?Shape<{ ...CSSStyleDeclaration, aspectRatio: string }>,
 };
 
 function EncryptedMultimedia(props: Props): React.Node {
diff --git a/web/media/loadable-video.react.js b/web/media/loadable-video.react.js
--- a/web/media/loadable-video.react.js
+++ b/web/media/loadable-video.react.js
@@ -20,7 +20,7 @@
   +uri: ?string,
   +thumbnailSource: ThumbnailSource,
   +thumbHashDataURL?: ?string,
-  +elementStyle?: ?Shape<CSSStyleDeclaration>,
+  +elementStyle?: ?Shape<{ ...CSSStyleDeclaration, aspectRatio: string }>,
   +multimediaClassName?: string,
 };
 
diff --git a/web/media/media.css b/web/media/media.css
--- a/web/media/media.css
+++ b/web/media/media.css
@@ -20,7 +20,13 @@
   /* in multimedia.react.js */
   max-height: 200px;
   max-width: 100%;
+  border-radius: 16px;
 }
+
+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
--- a/web/media/multimedia.react.js
+++ b/web/media/multimedia.react.js
@@ -158,8 +158,7 @@
         ? `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]);