css - 如何使用图像作为 Bootstrap 的封面

Question

我必须使用 Bootstrap 3 和 CSS 设计一个响应式网站。对于封面，我正在使用图像。它的尺寸是 4928 × 2747(可能太大了？)。

到目前为止，我是这样集成它的:

HTML:

<div class="jumbotron cover">
  <div class="container text-center">
    <hr border-top="3px">
    <h1 class="cover">Heading</h1>
    <a class="btn btn-cover" href="#" role="button">
      <span class="glyphicon glyphicon-play"></span>
      Check out the XX
    </a>
  </div> 
</div> 

CSS:

.jumbotron.cover {
  background-image: url('images/new/DSC_0750_cropped_blended.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  height: 700px;
  margin-bottom: 0px;
}

考虑到响应式方面，我认为固定的 height: 700px; 不是一个选项。但是当我放下它时，图像会在底部被剪切。我认为 cover-div 现在的高度是由其中所有元素的高度之和定义的。

基本上我在问自己在尝试保持响应时在哪里以及如何定义 div 的高度？

Answer 1

您可以尝试下面的解决方案，或者您必须使用媒体查询:

<div class="jumbotron cover">
  <img src="images/new/DSC_0750_cropped_blended.jpg">
  <div class="container text-center">
    <hr border-top="3px">
    <h1 class="cover">Heading</h1>
    <a class="btn btn-cover" href="#" role="button">
      <span class="glyphicon glyphicon-play"></span>
      Check out the XX
    </a>
  </div>
</div>

<style>
  .jumbotron.cover {
    position: relative;
   }
  img {
    position: absolute;
    z-index: -1;
    width: 100%;
  }
</style>