CSS размер фона не работает должным образом

Question

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

background-size: cover;

Насколько я понимаю, было бы, если бы размер контейнера (в данном случае jumbotron) был таким же, как размер изображения (т. Е. Если изображение было 1280x350) и размер контейнера для этого окна просмотра был 1280x350), тогда изображение будет отображаться без обрезки или масштабирования. Если область просмотра будет больше, она начнет масштабироваться, а если область просмотра станет меньше, она начнет вырезать кусочки изображения.

Это не то, что я получаю, с таким же разрешением изображения размер в качестве области просмотра на экране 1080p (в данном случае 1920x350) мое изображение масштабируется масштабно. Изображение находится только в своем «нейтральном» состоянии при размере области просмотра шириной 1042 или около того, что не имеет смысла, учитывая, что изображение 1920 в ширину.

Любая помощь приветствуется в отношении того, что здесь происходит.

РЕДАКТИРОВАТЬ: Здесь заполнено CSS:

    .jumbotron{
          background-size: cover;
          background-image: url("../../test.jpg");
          border-radius: 0rem;
          background-repeat: no-repeat;
     }

РЕДАКТИРОВАТЬ 2: После дальнейшего исследования, это как-то связано с высотой изображения. Похоже, что приоритеты высоты изображения над шириной.

Answer 1

Меньшее изображение не поместится в больший порт просмотра без zoom. Вы можете использовать адаптивных изображений в зависимости от порта просмотра. Вы можете использовать два новых атрибута - srcset и sizes - для предоставления нескольких дополнительных исходных изображений вместе с подсказками, которые помогут браузеру выбрать правильный. Тестовая ссылка и исходный код .

<img srcset="elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg"
     alt="Elva dressed as a fairy">

Надеюсь, это поможет вам!