fix: Fix avatar image overlay aspect ratio

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 648e76d301a658d7d4e8a47d209fe00d837e7df7..b92f08666e94707aa9362f92f50dad22305e902a 100644 (file)
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -254,10 +254,6 @@ hr {
   -ms-filter: blur(10px);
 }
 
-.img-cover {
-  object-fit: cover;
-}
-
 .img-expanded {
   max-height: 90vh;
 }
@@ -350,10 +346,12 @@ br.big {
 }
 
 .avatar-overlay {
-  width: 20%;
-  height: 20%;
+  width: 20vw;
+  height: 20vw;
   max-width: 120px;
   max-height: 120px;
+  min-width: 80px;
+  min-height: 80px;
 }
 
 .avatar-pushup {

diff --git a/src/shared/components/common/pictrs-image.tsx b/src/shared/components/common/pictrs-image.tsx
index 9c14aefc483d3728252146b5410e95132285e860..5c3d823df58ba1a415ab1d5cb169adb81ea2e22a 100644 (file)
--- a/src/shared/components/common/pictrs-image.tsx
+++ b/src/shared/components/common/pictrs-image.tsx
@@ -34,13 +34,13 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
           className={classNames("overflow-hidden pictrs-image", {
             "img-fluid": !this.props.icon && !this.props.iconOverlay,
             banner: this.props.banner,
-            "thumbnail rounded":
+            "thumbnail rounded object-fit-cover":
               this.props.thumbnail && !this.props.icon && !this.props.banner,
             "img-expanded slight-radius":
               !this.props.thumbnail && !this.props.icon,
             "img-blur": this.props.thumbnail && this.props.nsfw,
-            "img-cover img-icon me-1": this.props.icon,
-            "ms-2 mb-0 rounded-circle img-cover avatar-overlay":
+            "object-fit-cover img-icon me-1": this.props.icon,
+            "ms-2 mb-0 rounded-circle object-fit-cover avatar-overlay":
               this.props.iconOverlay,
             "avatar-pushup": this.props.pushup,
           })}