[web] Fix stretched images bug

Summary:
Fix for [ENG-4371](https://linear.app/comm/issue/ENG-4371/short-images-get-stretched-on-web).

Screenshots for encrypted images:

{F633852}
{F633853}

Unencrypted images:

{F633855}
{F633854}

Test Plan: Run web app and check if images are stretched.

Reviewers: bartek, ashoat, tomek, inka

Reviewed By: bartek, ashoat

Subscribers: ashoat, tomek

Differential Revision: https://phab.comm.dev/D8483

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 {

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,
 };
 

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;

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]);
 

web/types/styles.js

@@ -0,0 +1,6 @@
+// @flow
+
+export type CSSStyle = {
+  ...CSSStyleDeclaration,
+  +aspectRatio?: string,
+};