Блог

Главная - Вопросы по программированию - Изображение баннера не изменяется на мобильных устройствах

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

#css #inspinia

#css #inspinia

Вопрос:

Я использую тему 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,
  ...

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

Ответ №1:

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

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

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

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

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

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

 .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;
}

Комментарии:

1. спасибо за ответ. На самом деле я уже пробовал cover, а теперь попробовал и center, но все еще безуспешно.

2. Центр предназначен для background-position свойства, обложка предназначена для background-size свойства. Это разные вещи, и вам нужны они оба. Косая черта между ними — это то, как css понимает разделение между background-position (центром) и background-size (обложкой) свойствами. Вы можете скопировать и вставить те строки, которые я вам дал, на место тех, которые вы опубликовали. Однако, как я уже сказал, этого недостаточно, поскольку вам также необходимо уменьшить высоту карусели. Вы можете скопировать и вставить другой код, который я вам дал, в @media. Это более понятно?

3. Спасибо за объяснение. Это действительно не решило проблему для меня, но я вижу, к чему вы клоните. Когда я меняю их, это меняет довольно много вещей, но я отмечаю ваше решение как ответ.

4. Могу заверить вас, что я попробовал css на вашем сайте, прежде чем сообщить вам, и это сработало. Попробуйте проверить, почему CSS не применяется, потому что результат должен быть правильным. Вот скриншот: dumpshare.net/images/7790384Istantanea_2020_08_28_09_56_46.png

5. Конечно, я понимаю. Я потратил на это немного больше времени. Я максимально приблизил его к тому, что я намереваюсь. Я использовал то, что вы предложили, а также использовал ширину, максимальную ширину, размер фона в качестве обложки, положение фона в процентах и отображение в виде блока.