Hoje publiquei um novo artigo e a imagem na seção de Pré-visualização apresenta um overflow da borda.
Ao visualizar o artigo publicado, a imagem está parcialmente transbordando e oculta.
Artigos anteriores não apresentam esse problema. Isso é um bug e como corrigi-lo?
Link: https://babyforex.net/t/xu-huong-thi-truong-forex-21-08-2019-gold-xau-usd-gbp-usd-aud-usd/169
Vamos ver, esta é uma imagem de 1700 × 480:
Parece estar tudo certo. Você sobrescreveu o CSS no seu site? Isso pode estar interferindo. Não consigo reproduzir nenhum problema com uma imagem larga.
Também cliquei e não vi nenhum problema no seu site, nem mesmo com aquele tópico. Todas as imagens parecem corretas e não estão recortadas artificialmente.
Observe que aninhar citações (ou apenas usar citações) limita a largura da postagem, então você pode observar estranhezas nesses casos.
Como assim, imagine que isso fosse uma imagem
Não consegui encontrar nenhum problema. E preciso sobrescrever o CSS no Admin para corrigir isso.
Consigo reproduzir sem problemas, então não tenho certeza do que você está falando. Veja a postagem acima com a imagem larga.
Eu gravei um vídeo com detalhes: https://www.youtube.com/watch?v=3uRjtTzXj7o
O vídeo não ajuda, tente reproduzi-lo aqui no Meta. Adicione uma imagem larga na sua próxima resposta.
Não vejo nenhum problema nas imagens acima?
Isso significa que meu fórum tem um problema. Mas eu não encontrei nenhum problema. Tentei remover todos os plugins e componentes do tema, mas não consegui corrigir esse erro.
Agora preciso adicionar este CSS no CSS personalizado para resolver o problema:
.d-editor-preview .image-wrapper img, .lightbox-wrapper img, .cooked img.d-lazyload {
width: 100%;
height: auto;
}
Tentei comparar o CSS do meu site com o do Discourse.
No meu 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">
No 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">
No Discourse, o valor é sempre 690px.
Mas no meu site, o valor é 1200px e as imagens estão ficando ocultas.
