The discussion revolves around an issue with images in posts being too wide when “max image width” is set. tohaitrieu reported that images in their posts were overflowing, particularly when quoting long content from another article. codinghorror initially couldn’t reproduce the problem and suggested that the issue might be related to custom CSS.
tohaitrieu discovered that the issue occurred when quoting long content and suspected it was related to the Quote BB Code. After trying various solutions, including removing plugins and theme components, tohaitrieu added custom CSS to fix the problem.
Upon further investigation, tohaitrieu found that the issue was due to a difference in CSS between their site and Discourse. Their site had a max-width of 1200px, while Discourse had a max-width of 690px. tohaitrieu ultimately fixed the issue by changing the value to the default setting.
Today I posted a new article and the image in Preview section has a border overflow.
When viewing the published article, the image is partially overflowed and hidden.
Previous articles do not suffer from this situation. Is this a bug and how to fix it?
Link: https://babyforex.net/t/xu-huong-thi-truong-forex-21-08-2019-gold-xau-usd-gbp-usd-aud-usd/169
Let’s see, this is a 1700 × 480 image:
Seems fine. Did you override CSS on your site, is that interfering? I can’t repro any problem with a wide image.
I also clicked through and I don’t see any problem on your site, with that topic either. All the images look fine and not artificially cropped.
Note that nesting quotes (or just quotes) inhibit the width of the post so you may observe oddities in those cases
Like so, imagine this was an image
I coudn’t find any problem. And I mus override css in Admin to Fix this.
I can reproduce no problem, so I am not sure what you’re talking about. See above post with wide image.
I record a video with details: https://www.youtube.com/watch?v=3uRjtTzXj7o
The video does not help, try to reproduce it here on meta. Add a wide image to your next reply.
I see no problem with the above images?
It means my forum have problem. But I have no find any problem. I try remove all plugin, Theme component and can not fix this error.
Now I must add this css in custom css to fix problem:
.d-editor-preview .image-wrapper img, .lightbox-wrapper img, .cooked img.d-lazyload {
width: 100%;
height: auto;
}
I tried to compare css from my site with discourse.
In my site,
#reply-control .d-editor-preview img:not(.thumbnail), .cooked img:not(.thumbnail) {
max-width: 1200px;
max-height: 628px;
}
html
<img src="https://babyforex.net/uploads/default/original/1X/10670fd0bf4b34154ae4447feff1fc93f5eaed7e.jpeg" alt="h%C3%ACnh%20%E1%BA%A3nh" data-base62-sha1="2l6rNxc3PYiacNMqRTIM4GcaAjA" width="1200" height="526" class="d-lazyload">
In discourse:
#reply-control .d-editor-preview img:not(.thumbnail), .cooked img:not(.thumbnail) {
max-width: 690px;
max-height: 500px;
html:
<img src="https://global.discourse-cdn.com/meta/optimized/3X/e/9/e98710650be7c014168330f7c60d7081340c89cb_2_690x194.jpeg" alt="image" data-base62-sha1="xjSCGCdDwgRqb1OJkiAZNgbEQEr" width="690" height="194" class="d-lazyload" srcset="https://global.discourse-cdn.com/meta/optimized/3X/e/9/e98710650be7c014168330f7c60d7081340c89cb_2_690x194.jpeg, https://global.discourse-cdn.com/meta/optimized/3X/e/9/e98710650be7c014168330f7c60d7081340c89cb_2_1035x291.jpeg 1.5x, https://global.discourse-cdn.com/meta/optimized/3X/e/9/e98710650be7c014168330f7c60d7081340c89cb_2_1380x388.jpeg 2x">
discourse alway is 690px
But my website is 1200 and images has been hidden.
