Сегодня я опубликовал новую статью, и у изображения в разделе «Предпросмотр» есть переполнение границ.
При просмотре опубликованной статьи изображение частично выходит за пределы и скрывается.
В предыдущих статьях такой проблемы не было. Это баг и как его исправить?
Ссылка: https://babyforex.net/t/xu-huong-thi-truong-forex-21-08-2019-gold-xau-usd-gbp-usd-aud-usd/169
Давайте посмотрим, это изображение размером 1700 × 480:
Вроде всё в порядке. Не переопределяли ли вы CSS на вашем сайте, не мешает ли это? Я не могу воспроизвести никаких проблем с широким изображением.
Я также перешёл по ссылке и не вижу никаких проблем на вашем сайте ни с этой темой, ни с другими. Все изображения выглядят нормально и не обрезаны искусственно.
Обратите внимание, что вложенные цитаты (или просто цитаты) ограничивают ширину поста, поэтому в таких случаях вы можете заметить странности.
Вот так, представьте, что это изображение
Я не смог найти никакой проблемы. И я должен переопределить CSS в админ-панели, чтобы исправить это.
Я могу воспроизвести это без проблем, поэтому не совсем понимаю, о чём вы говорите. См. сообщение выше с широким изображением.
Я записал видео с подробностями: https://www.youtube.com/watch?v=3uRjtTzXj7o
Видео не помогает, попробуйте воспроизвести это здесь, в Meta. Добавьте широкое изображение в ваш следующий ответ.
Я не вижу проблем с вышеуказанными изображениями?
Это означает, что на моём форуме есть проблема. Но я не нашёл никакой ошибки. Я попытался удалить все плагины и компоненты темы, но не смог исправить эту ошибку.
Теперь мне нужно добавить этот CSS в пользовательские стили, чтобы решить проблему:
.d-editor-preview .image-wrapper img, .lightbox-wrapper img, .cooked img.d-lazyload {
width: 100%;
height: auto;
}
Я попытался сравнить CSS на моём сайте с Discourse.
На моём сайте:
#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">
В 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 всегда 690 пикселей.
А на моём сайте — 1200 пикселей, и изображения скрыты.
