html - 超大屏幕图像高度

Question

我的超大屏幕图像是 1,100 x 687。但是当我将图像添加到超大屏幕时，img 高度仅为 310 像素。我想将高度增加到至少 500(同时在较小的设备上仍然可以响应)。我怎样才能做到这一点？

超大屏幕语法:

.jumbotron{
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../img/colorful_planke.jpg");
    background-size: cover;
}

<div class="jumbotron jumbotron-fluid jumbo_text">
    <div class="container"><br>
        <h1 class="display-4 font-weight-bold text-center">Sell More Online</h1><br>
        <p class="lead text-center font-weight-bold">Web Development | Web Design | Google Analytics | Online Advertising |
            Social Media Advertising</p>
        <br>
        <h2 class="text-center">Let's Make Your Business More Profitable!</h2>
    </div>
</div>

最后，如果您想将大图片添加到主页，是否建议使用 jumbotron，还是应该将其放在普通的 .container 中？

Answer 1

如果你想要更大的 .jumbotron，请设置 min-height:

.jumbotron {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("http://lorempixel.com/1100/667/");
  background-size: cover;
  color: #fff;
  min-height: 500px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="jumbotron jumbotron-fluid jumbo_text">
  <div class="container"><br>
    <h1 class="display-4 font-weight-bold text-center">Sell More Online</h1><br>
    <p class="lead text-center font-weight-bold">Web Development | Web Design | Google Analytics | Online Advertising | Social Media Advertising</p>
    <br>
    <h2 class="text-center">Let's Make Your Business More Profitable!</h2>
  </div>
</div>