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

这里的问题是您的图片处于纵向模式。也许一个 class Server(BaseServer): def _handle(self, request): request = self._parse(request) response = request # processing code response = self._format(response) self._send(response) 会成功的。

Answer 2

按如下所示更改您的超大型飞机班级：

.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;
}

也请查看this，因为它是响应能力的行业标准

Answer 3

您的布局为全角，并且图像处于纵向模式，因此无法显示整个图像。尝试这样的事情：

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

如果您想拥有全屏超大屏幕，请尝试：

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

因此您将获得所显示照片的最多信息。

Answer 4

尝试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>

响应式巨型图像

4 个答案: