Images dans les publications trop larges lorsque la « largeur maximale de l'image » est définie

Aujourd’hui, j’ai publié un nouvel article et l’image dans la section Aperçu présente un débordement de bordure.

Lors de l’affichage de l’article publié, l’image est partiellement débordée et masquée.

Les articles précédents ne sont pas affectés par ce problème. S’agit-il d’un bug et comment le corriger ?

Lien : https://babyforex.net/t/xu-huong-thi-truong-forex-21-08-2019-gold-xau-usd-gbp-usd-aud-usd/169

Voyons, il s’agit d’une image de 1700 × 480 :

Ça semble correct. Avez-vous remplacé le CSS sur votre site ? Cela pourrait-il interférer ? Je ne parviens pas à reproduire de problème avec une image large.

J’ai également cliqué et je ne vois aucun problème sur votre site, y compris dans ce sujet. Toutes les images semblent correctes et ne sont pas recadrées artificiellement.

Notez que l’imbrication de citations (ou simplement des citations) limite la largeur du message, vous pourriez donc observer des anomalies dans ces cas.

Comme ceci, imaginez que ce soit une image

Je n’ai trouvé aucun problème. Et je dois remplacer le CSS dans Admin pour corriger cela.

Je peux reproduire le problème sans souci, donc je ne suis pas sûr de ce dont vous parlez. Voir le message ci-dessus avec l’image large.

J’ai enregistré une vidéo avec les détails suivants : https://www.youtube.com/watch?v=3uRjtTzXj7o

La vidéo ne permet pas de résoudre le problème. Essayez de le reproduire ici sur Meta. Ajoutez une image large à votre prochaine réponse.

Voici mon image avec une largeur de 1500 px.

J’ai vérifié et ce bug ne se produit que dans cet article lorsque je cite un long contenu depuis un autre article.

Je pense que ce bug provient du code BB Quote.

Tous les autres articles sont corrects.

Vérifier

Je ne vois aucun problème avec les images ci-dessus ?

Cela signifie que mon forum a un problème. Mais je n’ai trouvé aucun problème. J’ai essayé de supprimer tous les plugins et les composants du thème, mais je n’ai pas pu corriger cette erreur.

Maintenant, je dois ajouter ce CSS dans le CSS personnalisé pour résoudre le problème :

.d-editor-preview .image-wrapper img, .lightbox-wrapper img, .cooked img.d-lazyload {
    width: 100%;
    height: auto;
}

J’ai essayé de comparer le CSS de mon site avec celui de Discourse.

Sur mon 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">

Sur 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">

Sur Discourse, la largeur est toujours de 690 px.

Mais sur mon site, elle est de 1200 px et les images sont masquées.

Et c’est mon erreur, pas un bug. Je l’ai corrigé.

Modifiez la valeur par défaut.

Merci !