Improve image drawing fill strategy

src/components/structures/BackdropPanel.tsx

@@ -37,16 +37,28 @@ export default class BackdropPanel extends React.PureComponent<IProps> {
         const imageHeight = (backgroundImage as ImageBitmap).height
                 || (backgroundImage as HTMLImageElement).naturalHeight;
 
-        const destinationX = width - imageWidth;
-        const destinationY = height - imageHeight;
+        const contentRatio = imageWidth / imageHeight;
+        const containerRatio = width / height;
+        let resultHeight;
+        let resultWidth;
+        if (contentRatio > containerRatio) {
+            resultHeight = height;
+            resultWidth = height * contentRatio;
+        } else {
+            resultWidth = width;
+            resultHeight = width / contentRatio;
+        }
+
+        const x = (width - resultWidth) / 2;
+        const y = (height - resultHeight) / 2;
 
         this.ctx.filter = `blur(${this.props.blur})`;
         this.ctx.drawImage(
             backgroundImage,
-            Math.min(destinationX, 0),
-            Math.min(destinationY, 0),
-            Math.max(width, imageWidth),
-            Math.max(height, imageHeight),
+            x,
+            y,
+            resultWidth,
+            resultHeight,
         );
     }
 

src/components/structures/LoggedInView.tsx

@@ -61,7 +61,6 @@ import { MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
 import AudioFeedArrayForCall from '../views/voip/AudioFeedArrayForCall';
 import { OwnProfileStore } from '../../stores/OwnProfileStore';
 import { UPDATE_EVENT } from "../../stores/AsyncStore";
-import { mediaFromMxc } from "../../customisations/Media";
 
 
 // We need to fetch each pinned message individually (if we don't already have it)