大图上传中图片缩放的CSS问题

[mitchellk (Mitchell Krog)]

I had this fixed but then broke it somehow, can someone perhaps see if they can spot where in CSS I can get images uploaded that are over 1400px in width to auto size and not be cut off.

I had this in CSS which worked 100%

body .cooked img:not(.thumbnail) {
    width: auto;
    height: auto;
    display: block;
    max-width: 900px;
}

until I changed it to the following (adding .emoji) as emojis were displaying big. That worked for fixing the big emoji’s but broke the image resizing of large images again.

body .cooked img:not(.thumbnail .emoji) {
    width: auto;
    height: auto;
    display: block;
    max-width: 900px;
    max-height: 900px;
}

If I inspect the element in Chrome it shows that this is where it is getting it’s CSS from

#reply-control .d-editor-preview img:not(.thumbnail), .cooked img:not(.thumbnail) {
max-width: 1200px;
max-height: 1200px;
}

However trying to override that with

body #reply-control .d-editor-preview img:not(.thumbnail .emoji), .cooked img:not(.thumbnail .emoji) {
    width: auto;
    height: auto;
    display: block;
    max-width: 900px;
    max-height: 900px;
}

has no effect. I’m a bit stumped now.

[mitchellk (Mitchell Krog)]

As nobody could answer this I did some more digging this morning and found the culprit. The image-sizing-hack as it is so called inside the code of a particular JS file makes overriding this with CSS rather tricky. Here is an explanation of the problem and currently partial solution.

The image-sizing-hack as it is called is inherited from a file called “html.desktop-view.not-mobile-device.js.no-touch.discourse-no-touch”

It gets placed into the site code like this

To override it now so that large images do not get cut off I found the following CSS to successfully override the image-sizing-hack but it once again leaves me with oversized emoji’s. Adding .emoji into the img:not clause once again breaks the whole thing.

So here’s my CSS for correct image sizing (but rather large emoji’s)

body #image-sizing-hack #reply-control .d-editor-preview img:not(.thumbnail), .cooked img:not(.thumbnail) {
    width: auto;
    height: auto;
    display: block !important;
    max-width: 800px !important;
    max-height: auto !important;
}

and how the emoji’s look

[mitchellk (Mitchell Krog)]

Finally solved the riddle, stupid me. The settings are here and the CSS above not needed at all and emoji’s no longer screwed up. rookie mistake