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 [תמונה] 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 [תמונה]

בעיית CSS עם שינוי גודל תמונה בהעלאות של תמונות גדולות

תמיכה

mitchellk (Mitchell Krog) 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

נושא		תגובות	צפיות
My (custom sized emojis) have suddenly resized smaller (becoming square) Product Support emoji	2	334	21 ביולי,‏ 2025
Problem adding custom emojis Bug	8	1283	3 בינואר,‏ 2017
Images in posts too wide when “max image width” is set Product Support	11	1161	22 באוגוסט,‏ 2019
Allow user to specify size of image via attributes Feature	7	2684	12 באוגוסט,‏ 2015
Uploaded Emoji are a bit desaturated? Bug	7	2191	4 באוגוסט,‏ 2015

בעיית CSS עם שינוי גודל תמונה בהעלאות של תמונות גדולות

נושאים קשורים