Merge pull request #6423 from matrix-org/gsouquet/fix-18077

res/css/views/messages/_MImageBody.scss

@@ -21,11 +21,7 @@ $timelineImageBorderRadius: 4px;
 }
 
 .mx_MImageBody_thumbnail {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
+    object-fit: contain;
     border-radius: $timelineImageBorderRadius;
 
     display: flex;

src/components/views/messages/MImageBody.tsx

@@ -361,8 +361,6 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
 
         const thumbnail = (
             <div className="mx_MImageBody_thumbnail_container" style={{ maxHeight: maxHeight + "px", maxWidth: maxWidth + "px" }} >
-                { /* Calculate aspect ratio, using %padding will size _container correctly */ }
-                <div style={{ paddingBottom: forcedHeight ? (forcedHeight + "px") : ((100 * infoHeight / infoWidth) + '%') }} />
                 { showPlaceholder &&
                     <div className="mx_MImageBody_thumbnail" style={{
                         // Constrain width here so that spinner appears central to the loaded thumbnail

src/components/views/messages/MStickerBody.tsx

@@ -23,16 +23,16 @@ import { BLURHASH_FIELD } from "../../../ContentMessages";
 @replaceableComponent("views.messages.MStickerBody")
 export default class MStickerBody extends MImageBody {
     // Mostly empty to prevent default behaviour of MImageBody
-    onClick(ev) {
+    protected onClick = (ev: React.MouseEvent) => {
         ev.preventDefault();
         if (!this.state.showImage) {
             this.showImage();
         }
-    }
+    };
 
     // MStickerBody doesn't need a wrapping `<a href=...>`, but it does need extra padding
     // which is added by mx_MStickerBody_wrapper
-    wrapImage(contentUrl, children) {
+    protected wrapImage(contentUrl: string, children: React.ReactNode): JSX.Element {
         let onClick = null;
         if (!this.state.showImage) {
             onClick = this.onClick;
@@ -42,13 +42,13 @@ export default class MStickerBody extends MImageBody {
 
     // Placeholder to show in place of the sticker image if
     // img onLoad hasn't fired yet.
-    getPlaceholder(width, height) {
+    protected getPlaceholder(width: number, height: number): JSX.Element {
         if (this.props.mxEvent.getContent().info[BLURHASH_FIELD]) return super.getPlaceholder(width, height);
         return <img src={require("../../../../res/img/icons-show-stickers.svg")} width="75" height="75" />;
     }
 
     // Tooltip to show on mouse over
-    getTooltip() {
+    protected getTooltip(): JSX.Element {
         const content = this.props.mxEvent && this.props.mxEvent.getContent();
 
         if (!content || !content.body || !content.info || !content.info.w) return null;
@@ -60,7 +60,7 @@ export default class MStickerBody extends MImageBody {
     }
 
     // Don't show "Download this_file.png ..."
-    getFileBody() {
+    protected getFileBody() {
         return null;
     }
 }