Jumbotron проблема с различными соотношениями экрана

Question

Я столкнулся с проблемой при разработке jumbotron для веб-сайта. Это вне контейнера. Создал фон для него, установил фоновый размер для покрытия, работал отлично.

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

Затем я попробовал background-size: 100% 100%, думая, что изображение растянется. Без изменений. Думал, что у меня, возможно, была проблема с полями / отступами. Без изменений снова.

Это проблема с изображением или джумботроном? Я не уверен, как решить это. Независимо от того, какое изображение я выбираю, оно на разных устройствах ведет себя по-разному.

Answer 1

Если вы хотите, чтобы изображение растягивалось до полного элемента (даже если это означает потерю пропорции), вам нужно установить background-attachment на фиксированный и background-size на 100%.Как:

 .jumbotron {
     background-image: url(image.url);
     background-size: 100% 100%;
     background-attachment: fixed;
  }

Рабочий пример:

https://jsfiddle.net/4w9u7m1a/2/

Answer 2

По-разному ведет себя на разных устройствах, это не ошибка, это особенность. Сказав это, попробуйте это ...

background-image: url(INSERT_URL_HERE);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;