From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 5 May 2021 13:52:49 +0000 (+0200)
Subject: Preserve the aspect ratio for scaled images
X-Git-Tag: 5.4.0_Alpha_2~52
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=cb5ccff7af9ebf87ffc3ec0c5d7bc8d47fca6c26;p=GitHub%2FWoltLab%2FWCF.git

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.
---

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) {