From cb5ccff7af9ebf87ffc3ec0c5d7bc8d47fca6c26 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Wed, 5 May 2021 15:52:49 +0200 Subject: [PATCH] Preserve the aspect ratio for scaled images Specifying an explicit height requires `height: auto` to be set via CSS, otherwise scaling through `max-width: 100%` does not preserve the image's aspect ratio. --- wcfsetup/install/files/style/layout/box.scss | 1 + wcfsetup/install/files/style/layout/global.scss | 1 + wcfsetup/install/files/style/ui/attachment.scss | 2 ++ wcfsetup/install/files/style/ui/comment.scss | 1 + wcfsetup/install/files/style/ui/redactor.scss | 1 + 5 files changed, 6 insertions(+) diff --git a/wcfsetup/install/files/style/layout/box.scss b/wcfsetup/install/files/style/layout/box.scss index c3bee36810..8eb439ca5e 100644 --- a/wcfsetup/install/files/style/layout/box.scss +++ b/wcfsetup/install/files/style/layout/box.scss @@ -5,6 +5,7 @@ .boxImage { img { + height: auto; max-width: 100%; } } diff --git a/wcfsetup/install/files/style/layout/global.scss b/wcfsetup/install/files/style/layout/global.scss index 67db1b2b98..2f85f0a275 100644 --- a/wcfsetup/install/files/style/layout/global.scss +++ b/wcfsetup/install/files/style/layout/global.scss @@ -116,6 +116,7 @@ ol.nativeList { @include clearfix; img { + height: auto; max-width: 100%; } diff --git a/wcfsetup/install/files/style/ui/attachment.scss b/wcfsetup/install/files/style/ui/attachment.scss index 5c1365022d..53419c36a5 100644 --- a/wcfsetup/install/files/style/ui/attachment.scss +++ b/wcfsetup/install/files/style/ui/attachment.scss @@ -53,6 +53,7 @@ img { backface-visibility: hidden; + height: auto; max-width: 100%; opacity: 0.85; transform: translate3d(0, 0, 0); @@ -192,6 +193,7 @@ .embeddedImageLink { border: 1px solid $wcfContentBorderInner; display: inline-block; + height: auto; margin: 2px 0; max-width: 100%; min-height: 48px; diff --git a/wcfsetup/install/files/style/ui/comment.scss b/wcfsetup/install/files/style/ui/comment.scss index 36e90e3319..fade75a8f4 100644 --- a/wcfsetup/install/files/style/ui/comment.scss +++ b/wcfsetup/install/files/style/ui/comment.scss @@ -265,6 +265,7 @@ /* Prevent images in comments in the sidebar box from becoming too large */ .sidebarCommentContent { img { + height: auto; max-width: 100%; max-height: 300px; } diff --git a/wcfsetup/install/files/style/ui/redactor.scss b/wcfsetup/install/files/style/ui/redactor.scss index 77ba0dba8a..79c53d2da7 100644 --- a/wcfsetup/install/files/style/ui/redactor.scss +++ b/wcfsetup/install/files/style/ui/redactor.scss @@ -83,6 +83,7 @@ } img { + height: auto; max-width: 100%; &:not(.smiley) { -- 2.20.1