diff --git a/src/assets/css/main.css b/src/assets/css/main.css index 648e76d3..b92f0866 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 9c14aefc..5c3d823d 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 { 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, })}