# CSS Problem with image resizing on large image uploads
**URL:** https://meta.discourse.org/t/css-problem-with-image-resizing-on-large-image-uploads/56947
**Category:** Support
**Created:** [February 5, 2017, 4:07pm UTC](https://meta.discourse.org/t/css-problem-with-image-resizing-on-large-image-uploads/56947 "2017-02-05T16:07:10Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@mitchellk](https://meta.discourse.org/u/mitchellk)
#### Post date: [February 5, 2017, 4:07pm UTC](https://meta.discourse.org/t/css-problem-with-image-resizing-on-large-image-uploads/56947/1 "2017-02-05T16:07:10Z")
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.
---
### Author:  [@mitchellk](https://meta.discourse.org/u/mitchellk)
#### Post date: [February 6, 2017, 10:43am UTC](https://meta.discourse.org/t/css-problem-with-image-resizing-on-large-image-uploads/56947/2 "2017-02-06T10:43:15Z")
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
---
### Author:  [@mitchellk](https://meta.discourse.org/u/mitchellk)
#### Post date: [February 6, 2017, 12:04pm UTC](https://meta.discourse.org/t/css-problem-with-image-resizing-on-large-image-uploads/56947/3 "2017-02-06T12:04:06Z")
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
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [June 8, 2024, 12:45pm UTC](https://meta.discourse.org/t/css-problem-with-image-resizing-on-large-image-uploads/56947/4 "2024-06-08T12:45:05Z")
This topic was automatically closed after 2679 days. New replies are no longer allowed.