Images in posts too wide when “max image width” is set

[tohaitrieu (To Trieu)]

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

[codinghorror (Jeff Atwood)]

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

[tohaitrieu (To Trieu)]

I coudn’t find any problem. And I mus override css in Admin to Fix this.

[codinghorror (Jeff Atwood)]

I can reproduce no problem, so I am not sure what you’re talking about. See above post with wide image.

[tohaitrieu (To Trieu)]

I record a video with details: https://www.youtube.com/watch?v=3uRjtTzXj7o

[codinghorror (Jeff Atwood)]

The video does not help, try to reproduce it here on meta. Add a wide image to your next reply.

[tohaitrieu (To Trieu)]

This is my Image with 1500px width.

I checked and this bug only on this article when I quotes long content from another article.

I think this bug come from Quote BB Code

All article is ok.

[tohaitrieu (To Trieu)]

Check

[codinghorror (Jeff Atwood)]

I see no problem with the above images?

[tohaitrieu (To Trieu)]

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;
}

[tohaitrieu (To Trieu)]

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://d11a6trkgmumsb.cloudfront.net/optimized/3X/e/9/e98710650be7c014168330f7c60d7081340c89cb_2_690x194.jpeg" alt="image" data-base62-sha1="xjSCGCdDwgRqb1OJkiAZNgbEQEr" width="690" height="194" class="d-lazyload" srcset="https://d11a6trkgmumsb.cloudfront.net/optimized/3X/e/9/e98710650be7c014168330f7c60d7081340c89cb_2_690x194.jpeg, https://d11a6trkgmumsb.cloudfront.net/optimized/3X/e/9/e98710650be7c014168330f7c60d7081340c89cb_2_1035x291.jpeg 1.5x, https://d11a6trkgmumsb.cloudfront.net/optimized/3X/e/9/e98710650be7c014168330f7c60d7081340c89cb_2_1380x388.jpeg 2x">

discourse alway is 690px

But my website is 1200 and images has been hidden.

[tohaitrieu (To Trieu)]

And this is my error, not a bug. I fixed it.

Change value to default.

Thank you!