Hoy publiqué un nuevo artículo y la imagen en la sección de Vista previa tiene un desbordamiento del borde.
Al ver el artículo publicado, la imagen está parcialmente desbordada y oculta.
Los artículos anteriores no presentan este problema. ¿Es esto un error y cómo se puede solucionar?
Enlace: https://babyforex.net/t/xu-huong-thi-truong-forex-21-08-2019-gold-xau-usd-gbp-usd-aud-usd/169
Veamos, esta es una imagen de 1700 × 480:
Parece estar bien. ¿Sobrescribiste el CSS en tu sitio? ¿Podría estar interfiriendo? No puedo reproducir ningún problema con una imagen ancha.
También hice clic y no veo ningún problema en tu sitio, ni siquiera con ese tema. Todas las imágenes se ven bien y no están recortadas artificialmente.
Ten en cuenta que anidar citas (o simplemente usar citas) limita el ancho del mensaje, por lo que podrías observar anomalías en esos casos.
Así, imagina que esto fuera una imagen
No pude encontrar ningún problema. Y debo sobrescribir el CSS en el panel de administración para solucionarlo.
Puedo reproducirlo sin problemas, así que no estoy seguro de a qué te refieres. Consulta el mensaje anterior con la imagen ancha.
He grabado un video con los detalles: https://www.youtube.com/watch?v=3uRjtTzXj7o
El video no ayuda, intenta reproducirlo aquí en Meta. Agrega una imagen panorámica en tu próxima respuesta.
¿No veo ningún problema con las imágenes anteriores?
Significa que mi foro tiene un problema. Pero no he encontrado ningún error. Intenté eliminar todos los complementos y componentes del tema, y no pude solucionar este error.
Ahora debo agregar este CSS en el CSS personalizado para solucionar el problema:
.d-editor-preview .image-wrapper img, .lightbox-wrapper img, .cooked img.d-lazyload {
width: 100%;
height: auto;
}
Intenté comparar el CSS de mi sitio con el de Discourse.
En mi sitio:
#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">
En 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">
En Discourse siempre es de 690px.
Pero en mi sitio web es de 1200px y las imágenes se han ocultado.
