WordPress Фоновое изображение не реагирует на мобильные устройства - PullRequest
Новая
       32

WordPress Фоновое изображение не реагирует на мобильные устройства

0 голосов
/ 06 июля 2018

Мой веб-сайт (https://www.yahoonewsz.com), и я загрузил изображение в папку public_html на сервере.

Я использовал следующий код для фона 

#main {
  background-image: url("image908.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

в расширенном разделе CSS в WordPress.

Почему изображение не реагирует на мобильные устройства?

Спасибо.

1 Ответ

0 голосов
/ 06 июля 2018

Вы используете background-size: cover, что в соответствии с background-size документами"Масштабирует изображение как можно больше, не растягивая его. Если пропорции изображения отличаются от элемента, это обрезается либо вертикально, либо горизонтально, чтобы не осталось пустого места. "

Это означает, что он масштабируется до наименьшего размера «без сквоша», который может быть, что предотвращает любое пустое пространство в контейнере. Поскольку ваш сайт (а именно #main) имеет примерно 3000px высоту на мобильном устройстве, фоновое изображение масштабируется до ~ 3000 пикселей в высоту.

Если вы хотите ограничить его до максимальной ширины, используйте background-size: contain, который «масштабирует изображение как можно большего размера без обрезки или растяжения изображения». Это означает, что он всегда будет заполнять контейнер, не будучи отрезанным. Обратите внимание, что это даст вам пустое пространство под (или выше) изображения на основе ваших настроек background-position.

...