今日、新しい記事を投稿したところ、プレビューセクションの画像に境界線のオーバーフローが発生しています。
公開された記事を表示すると、画像が部分的にオーバーフローして隠れています。
以前の投稿ではこの問題は発生していません。これはバグでしょうか？また、どのように修正すればよいでしょうか？
リンク: https://babyforex.net/t/xu-huong-thi-truong-forex-21-08-2019-gold-xau-usd-gbp-usd-aud-usd/169
問題は見つかりませんでした。これを修正するには、管理画面で CSS をオーバーライドする必要があります。
問題なく再現できるので、何を言っているのかよくわかりません。上記の広い画像を含む投稿をご覧ください。
詳細を説明する動画を録画しました：https://www.youtube.com/watch?v=3uRjtTzXj7o
動画では役に立ちませんので、メタ上で再現を試みてください。次の返信に横長の画像を追加してください。
上記の画像に問題は見当たりませんか？
それは、私のフォーラムに問題があることを意味します。しかし、私は問題を見つけることができませんでした。すべてのプラグインとテーマのコンポーネントを削除してみましたが、このエラーを修正できませんでした。
今、この CSS をカスタム CSS に追加して問題を修正する必要があります:
.d-editor-preview .image-wrapper img, .lightbox-wrapper img, .cooked img.d-lazyload {
width: 100%;
height: auto;
}
自分のサイトの CSS と Discourse の CSS を比較してみました。
自分のサイトでは、
#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ình ảnh" data-base62-sha1="2l6rNxc3PYiacNMqRTIM4GcaAjA" width="1200" height="526" class="d-lazyload">
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 では常に 690px に固定されています。
しかし、私のウェブサイトでは 1200px になっており、画像が隠れてしまっています。
