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>

如何使用图像作为引导程序的封面

1 个答案: