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.

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 [image] 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 [image]

CSS Problem with image resizing on large image uploads

Product Support

mitchellk (Mitchell Krog) February 6, 2017, 12:04pm 3

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

Topic		Replies	Views
My (custom sized emojis) have suddenly resized smaller (becoming square) Product Support emoji	2	327	July 21, 2025
Problem adding custom emojis Bug	8	1273	January 3, 2017
Images in posts too wide when “max image width” is set Product Support	11	1155	August 22, 2019
Allow user to specify size of image via attributes Feature	7	2657	August 12, 2015
Uploaded Emoji are a bit desaturated? Bug	7	2157	August 4, 2015

CSS Problem with image resizing on large image uploads

Related topics