From 0047c17eb319ac66d624472b5cc79cf4efcfb66e Mon Sep 17 00:00:00 2001 From: Jay Sitter <jay@jaysitter.com> Date: Sun, 2 Jul 2023 17:23:48 -0400 Subject: [PATCH] fix: Fix avatar image overlay aspect ratio --- src/assets/css/main.css | 10 ++++------ src/shared/components/common/pictrs-image.tsx | 6 +++--- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/src/assets/css/main.css b/src/assets/css/main.css index 648e76d..b92f086 100644 --- 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 9c14aef..5c3d823 100644 --- 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, })} -- 2.44.1