html - 响应超大屏幕图像

Question

我的背景中有一个巨型 tron 图像，但它没有那么灵敏，重要的是我可以显示整个图像。这是它现在的样子:

这是完整的图片:

这是我的超大屏幕的html代码

<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

您的布局是全宽的，而且您的图片是纵向模式，因此您无法显示整张图片。尝试这样的事情:

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

如果你想要全屏超大屏幕，试试:

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

这样您的照片就会显示出最多的信息。