Изображение баннера не меняет размер на мобильных устройствах

Question

Я использую тему Inspinia и не могу изменить размер изображения карусели на мобильных устройствах. Пример страницы здесь. Таблицу стилей можно увидеть здесь.

Теперь для страницы изображения указаны как:

.landing-page .header-back.one {
  background: url('../img/landing/header_one.jpg') 50% 0 no-repeat;
}
.landing-page .header-back.two {
  background: url('../img/landing/header_two.jpg') 50% 0 no-repeat;
}

Однако в разделе мультимедиа, похоже, нет ничего о том, как изменить размер:

@media (max-width: 767px) {
  .landing-page .carousel-caption,
  ...

Может кто-нибудь помочь? Спасибо.

Answer 1

По умолчанию background-size значение устанавливается на auto. Если вы хотите изменить размер фона, вам нужно изменить значение свойства. Обычно я рекомендуюcover, который заставляет ваш фон автоматически покрывать элемент вдоль его самых коротких осей, делая его идеально подходящим, и вырезает скрытые самые длинные оси, выходящие за пределы фона. Другими словами,cover свойство изменило размер фона, уменьшив его до наименьшего размера, который все еще покрывает его элемент.

Однако это не принесет вам никакой пользы, если вы не измените размер также и высоту карусели (поскольку высота - это самые короткие оси, на которых будет адаптироваться фон).

В вашем случае внутри вашего медиа-запроса я бы предпочел поставить

.landing-page .carousel, .header-back {
    height: 350px
}

который может быть 350 пикселей или любым другим значением, которое вы считаете нужным.

И, конечно же, фоны должны быть установлены следующим образом:

.landing-page .header-back.one {
  background: url('../img/landing/header_one.jpg') no-repeat center / cover;
}
.landing-page .header-back.two {
  background: url('../img/landing/header_two.jpg') no-repeat center / cover;
}