Измените размер изображения в jumbotron, чтобы полностью отображать его без прокрутки

Question

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

{% extends "base.html" %}

{% block style %}
.img{
    height: 750px;
}

{% endblock %}

{% block body %}

<div class="jumbotron jumbotron-fluid img" style="margin-left: 0%; margin-right: 0%; background-image: url('static/Background.jpg'); background-repeat: no-repeat; background-size: cover;">
  <div class="container">
    <h1 class="display-3" style="font-weight: 500">S</h1>
    <p class="lead">This is the about me area </p>
  </div>
</div>
{% endblock %}

Answer 1

Я понял, как это решить. Требуемый css выглядит следующим образом

.jumbotron{
  background-image: url('static/Background.jpg');
  background-repeat: no-repeat;
  background-size:100% 100%;
  padding-bottom:540px;
  margin-bottom: 0px;

}

Это jumbotron

<div class="jumbotron jumbotron-fluid" style="margin-left: 0%; margin-right: 0%;">
    <h1 class="display-3" style="font-weight: 500;">S</h1>
    <p class="lead">This is the about me area </p>
  </div>
</div>

Answer 2

Чтобы избежать прокрутки, вам нужно установить вертикальную высоту около 90 (поиграйте с этим значением, в данном случае для фрагмента, который я использовал 85), чтобы он заполнял большую часть экрана и все еще реагировал. Проверьте фрагмент кода.

Я понял, что вы хотели.

.jumbotron {
  background-color: blue;
  background-image: url("https://image.shutterstock.com/image-photo/earth-water-drop-reflection-under-260nw-621430085.jpg");
  background-repeat: no-repeat;
  height: 85vh;
  background-size: 100% 100%;
}

.container {
  height: 100%;
  width: 100%;
}

<div class="jumbotron jumbotron-fluid img">
  <div class="container">
    <h1 class="display-3" style="font-weight: 500">John Doe</h1>
    <p class="lead">This is the about me area </p>
  </div>
</div>

РЕДАКТИРОВАТЬ: Использовать размер фона: 100% 100%; чтобы растянуть изображение, как показано ниже, вам просто нужно изображение с соответствующим соотношением сторон