From 1aa934584fe43152eef36c259da6ea7f65bd06c5 Mon Sep 17 00:00:00 2001 From: Alec Armbruster Date: Mon, 12 Jun 2023 13:00:18 -0400 Subject: [PATCH 1/2] add .img-cover class, implement --- src/assets/css/main.css | 4 ++++ src/shared/components/common/pictrs-image.tsx | 4 ++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/assets/css/main.css b/src/assets/css/main.css index a0d72394..1c45341d 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -270,6 +270,10 @@ hr { -ms-filter: blur(10px); } +.img-cover { + object-fit: cover; +} + .img-expanded { max-height: 90vh; } diff --git a/src/shared/components/common/pictrs-image.tsx b/src/shared/components/common/pictrs-image.tsx index 6b9db565..91e4a18b 100644 --- a/src/shared/components/common/pictrs-image.tsx +++ b/src/shared/components/common/pictrs-image.tsx @@ -38,8 +38,8 @@ export class PictrsImage extends Component { "img-expanded slight-radius": !this.props.thumbnail && !this.props.icon, "img-blur": this.props.thumbnail && this.props.nsfw, - "rounded-circle img-icon mr-2": this.props.icon, - "ml-2 mb-0 rounded-circle avatar-overlay": this.props.iconOverlay, + "rounded-circle img-cover img-icon mr-2": this.props.icon, + "ml-2 mb-0 rounded-circle img-cover avatar-overlay": this.props.iconOverlay, "avatar-pushup": this.props.pushup, })} /> From 0d868d9005dbf7385af9f3aac86462e5729f47c4 Mon Sep 17 00:00:00 2001 From: Alec Armbruster Date: Mon, 12 Jun 2023 13:09:50 -0400 Subject: [PATCH 2/2] format with prettier --- src/shared/components/common/pictrs-image.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/shared/components/common/pictrs-image.tsx b/src/shared/components/common/pictrs-image.tsx index 91e4a18b..0b3493b5 100644 --- a/src/shared/components/common/pictrs-image.tsx +++ b/src/shared/components/common/pictrs-image.tsx @@ -39,7 +39,8 @@ export class PictrsImage extends Component { !this.props.thumbnail && !this.props.icon, "img-blur": this.props.thumbnail && this.props.nsfw, "rounded-circle img-cover img-icon mr-2": this.props.icon, - "ml-2 mb-0 rounded-circle img-cover avatar-overlay": this.props.iconOverlay, + "ml-2 mb-0 rounded-circle img-cover avatar-overlay": + this.props.iconOverlay, "avatar-pushup": this.props.pushup, })} />