Merge pull request #6514 from matrix-org/palid/fix/image-placeholders-incorrect-height

Palid · web-flow · commit 7c9df71a5758 · 2021-07-30T12:03:19.000+02:00
Fix incorrect height for encoded placeholder images
diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx
@@ -366,7 +366,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         }
 
         const thumbnail = (
-            <div className="mx_MImageBody_thumbnail_container" style={{ maxHeight: maxHeight + "px", maxWidth: maxWidth + "px" }}>
+            <div className="mx_MImageBody_thumbnail_container" style={{ maxHeight: maxHeight, maxWidth: maxWidth, aspectRatio: `${infoWidth}/${infoHeight}` }}>
                 { showPlaceholder &&
                     <div
                         className="mx_MImageBody_thumbnail"

Original file line number	Diff line number	Diff line change
`@@ -366,7 +366,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {`
`366`	`366`	`}`
`367`	`367`
`368`	`368`	`const thumbnail = (`
`369`		`- <div className="mx_MImageBody_thumbnail_container" style={{ maxHeight: maxHeight + "px", maxWidth: maxWidth + "px" }}>`
	`369`	+ <div className="mx_MImageBody_thumbnail_container" style={{ maxHeight: maxHeight, maxWidth: maxWidth, aspectRatio: `${infoWidth}/${infoHeight}` }}>
`370`	`370`	`{ showPlaceholder &&`
`371`	`371`	`<div`
`372`	`372`	`className="mx_MImageBody_thumbnail"`