Адаптивное изображение джумботрона

Question

У меня на заднем плане гигантское изображение, но оно не такое отзывчивое И главное, я могу показать все изображение целиком.Вот как это выглядит сейчас:

А вот полное изображение:

Вот мой HTML-код jumbotron

<div class="jumbotron">

    <div class="row">
        <div class="col-md-7 banner">
            <h2><span class="text-red">Lyfe</span></h2>
        </div>
    </div>


    <%= form_tag search_path, method: :get do %>
        <div class="row">
            <div class="col-md-offset-1 col-md-10">
                <%= text_field_tag :search, params[:search], placeholder: " Enter Delivery Address", class: "form-control text-center", id: "autohome" %>
            </div>
        </div>
        <br/><br/>

        <div class="row">
            <div class="col-md-offset-4 col-md-4">
                <%= submit_tag "Search", class: "btn btn-normal btn-block" %>
            </div>
        </div>
    <% end %>
</div>

А вот код CSS

.jumbotron {
  background-image: url(IMG-1373.JPG);
  background-size: cover;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
  width: 130%;
  right: 121px;
}

Answer 1

Попробуйте background-size, чтобы получить желаемый результат. Я дал ширину-100% и высоту-100% здесь:

.jumbotron {
  background-image: url(https://i.stack.imgur.com/wdPCQ.jpg);
  background-size: 100% 100%;
}

.text-red{
  color: tomato;
}

.btn {
  background-color: tomato !important;
  color: white !important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" type="text/css" />

<div class="jumbotron">
  <div class="row">
    <div class="col-md-7 banner">
      <h2><span class="text-red">Lyfe</span></h2>
    </div>
  </div>
  <div class="row">
    <div class="col-md-offset-1 col-md-10">
      <input type="text" class="form-control text-center" placeholder="Enter Delivery Address">
    </div>
  </div>
  <br/><br/>
  <div class="row">
    <div class="col-sm-offset-4 col-sm-4">
      <button class="form-control btn">Search</button>
    </div>
  </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>

Answer 2

Измените свой класс jumbotron следующим образом:

.jumbotron {
  background-image: url(IMG-1373.JPG);
  background-size: cover;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
  right: 121px;
}

Также обратите внимание на это , так как оно является отраслевым стандартом реагирования

Answer 3

Ваш макет на всю ширину, и ваше изображение находится в портретном режиме, поэтому вы не можете показать все изображение.Попробуйте что-то вроде этого:

.jumbotron {
   background-position: center 20%;
   background-size: cover;
}

Если вы хотите использовать полноэкранный jumbotron, попробуйте:

.jumbotron {
   height: 100vh;
   background-position: center 20%;
   background-size: cover;
}

, чтобы получить наибольшую информацию о вашей фотографии.

Answer 4

Проблема в том, что ваша картинка в портретном режиме. Может быть background-size: contain; сделал бы трюк.