Изображения становятся квадратными в мобильном режиме

Поддержка
1

Я заметил, что многие загруженные изображения на мобильном устройстве сжимаются до «квадратного» формата.
Подскажите, пожалуйста, это ожидаемое поведение дизайна или результат какой-то настройки?
Большое спасибо!

Мобильный вид:

image
image391×307 56.2 KB

Вид на ПК того же изображения:
image
image925×460 145 KB

2

Загрузка изображения для подтверждения

image
image508×290 16.6 KB

Это изображение было загружено с моего iPhone под управлением iOS 14, и всё прошло успешно. Возможно, изображение сжимается на вашем телефоне перед загрузкой? У меня всё работает нормально.

Какой браузер и его версию вы используете? А какая операционная система и версия на вашем телефоне?

3

Обратите внимание, что это одно и то же изображение, просто просмотренное на мобильном устройстве? Похоже, что расчёт соотношения сторон или высоты был нарушен.

4

Спасибо за ответ.

Я не думаю, что изображение сжимается, так как я загрузил скриншот напрямую.

Браузер, который я использовал на ПК, — Chrome.
На телефоне — Android 10.

Вот ссылка на проблемное изображение, которое я опубликовал:

Может быть, вы захотите проверить, столкнётесь ли вы с той же проблемой, используя изображение по ссылке выше?

5

Да, это одно и то же изображение, но на ПК и на мобильных устройствах оно отображается по-разному.

6

Это из-за правил CSS из пользовательской темы/компонента:

// Тема: Размер эмодзи
// Цель: мобильный scss
// Последнее изменение: 2016-02-10 14:39:25 UTC

div.contents.regular > div > p > img{
    height:100px;
    width:100px;
}
div.d-editor-container > div.d-editor-preview-wrapper > div > p > img{
    height:100px;
    width:100px;
}
7

Огромное спасибо за выявление первопричины! Однако я всё ещё не понимаю, где можно найти это правило. Не подскажете, как его можно отредактировать или изменить?

8

В панели администратора перейдите в раздел «Настроить», затем «Темы». Выберите нужную тему или компонент, нажмите «Изменить CSS/HTML», затем перейдите на вкладку CSS, скорее всего, она находится в верхней панели для мобильных устройств. Вы должны найти соответствующий CSS-код, записанный где-либо, и можете либо закомментировать его, либо удалить:

(здесь он закомментирован)

// Тема: 表情大小
// Цель: mobile scss
// Последнее изменение: 2016-02-10 14:39:25 UTC
/*
div.contents.regular > div > p > img{
    height:100px;
    width:100px;
}
div.d-editor-container > div.d-editor-preview-wrapper > div > p > img{
    height:100px;
    width:100px;
}*/
9

Да, удаление этого решило проблему. Большое спасибо!