Preserve the aspect ratio for scaled images
authorAlexander Ebert <ebert@woltlab.com>
Wed, 5 May 2021 13:52:49 +0000 (15:52 +0200)
committerAlexander Ebert <ebert@woltlab.com>
Wed, 5 May 2021 13:52:49 +0000 (15:52 +0200)
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
wcfsetup/install/files/style/layout/global.scss
wcfsetup/install/files/style/ui/attachment.scss
wcfsetup/install/files/style/ui/comment.scss
wcfsetup/install/files/style/ui/redactor.scss

index c3bee36810de05d85cf464217f3b94f5b08e36cb..8eb439ca5e330d1489c0f7fb8f3c8f5970289aac 100644 (file)
@@ -5,6 +5,7 @@
 
 .boxImage {
        img {
+               height: auto;
                max-width: 100%;
        }
 }
index 67db1b2b98fc74ee848b0e01b33f6ea7a1f77512..2f85f0a2751fffb352f342fc1081af17e989c79f 100644 (file)
@@ -116,6 +116,7 @@ ol.nativeList {
        @include clearfix;
 
        img {
+               height: auto;
                max-width: 100%;
        }
 
index 5c1365022d2571a6f8b0bca7ea972594d817b9a2..53419c36a58e8d9b32da453b251cbcba9f3b1136 100644 (file)
@@ -53,6 +53,7 @@
 
                img {
                        backface-visibility: hidden;
+                       height: auto;
                        max-width: 100%;
                        opacity: 0.85;
                        transform: translate3d(0, 0, 0);
 .embeddedImageLink {
        border: 1px solid $wcfContentBorderInner;
        display: inline-block;
+       height: auto;
        margin: 2px 0;
        max-width: 100%;
        min-height: 48px;
index 36e90e3319f005a89c4112ea8a3156e2b3fc6a7b..fade75a8f45db77b21be8e8c82c5bf1740416b29 100644 (file)
 /* Prevent images in comments in the sidebar box from becoming too large */
 .sidebarCommentContent {
        img {
+               height: auto;
                max-width: 100%;
                max-height: 300px;
        }
index 77ba0dba8adc7925a83e723381b8aa00547191bc..79c53d2da7dc17f80bd71356ee964f02c74f75b4 100644 (file)
@@ -83,6 +83,7 @@
        }
 
        img {
+               height: auto;
                max-width: 100%;
 
                &:not(.smiley) {