Fix scaling of the avatar in UserInfo

res/css/views/avatars/_BaseAvatar.scss

@@ -40,6 +40,7 @@ limitations under the License.
 }
 
 .mx_BaseAvatar_image {
+    object-fit: cover;
     border-radius: 40px;
     vertical-align: top;
     background-color: $avatar-bg-color;

res/css/views/right_panel/_UserInfo.scss

@@ -70,23 +70,33 @@ limitations under the License.
         margin: 0 auto;
     }
 
-    .mx_UserInfo_avatar > div * {
+    .mx_UserInfo_avatar > div > div {
         /* use padding-top instead of height to make this element square,
         as the % in padding is a % of the width (including margin,
         that's why we had to put the margin to center on a parent div),
         and not a % of the parent height. */
-        width: 30vh;
+        padding-top: 100%;
-        height: 30vh;
+        position: relative;
-        object-fit: cover;
-        border-radius: 100%;
-        box-sizing: content-box;
     }
 
-    // override the calculated sizes so that the letter isn't HUGE
+    .mx_UserInfo_avatar > div > div * {
-    .mx_UserInfo_avatar > div .mx_BaseAvatar_initial {
+        border-radius: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    .mx_UserInfo_avatar .mx_BaseAvatar_initial {
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        // override the calculated sizes so that the letter isn't HUGE
         font-size: 26px !important;
-        width: 30vh !important;
+        width: 100% !important;
-        line-height: 30vh !important;
     }
 
     .mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {

src/components/views/right_panel/UserInfo.js

@@ -1156,14 +1156,16 @@ const UserInfo = withLegacyMatrixClient(({matrixClient: cli, user, groupId, room
     const avatarElement = (
         <div className="mx_UserInfo_avatar">
             <div>
-                <MemberAvatar
+                <div>
-                    member={user}
+                    <MemberAvatar
-                    width={0.3 * window.outerHeight} // ~30vh
+                        member={user}
-                    height={0.3 * window.outerHeight} // ~30vh
+                        width={2 * 0.3 * window.innerHeight} // 2x@30vh
-                    resizeMethod="scale"
+                        height={2 * 0.3 * window.innerHeight} // 2x@30vh
-                    fallbackUserId={user.userId}
+                        resizeMethod="scale"
-                    onClick={onMemberAvatarClick}
+                        fallbackUserId={user.userId}
-                    urls={user.avatarUrl ? [user.avatarUrl] : undefined} />
+                        onClick={onMemberAvatarClick}
+                        urls={user.avatarUrl ? [user.avatarUrl] : undefined} />
+                </div>
             </div>
         </div>
     );