Question

我正在这里阅读一些已回答的问题，但我仍然有问题，我不能“重新调整”div内的图像，图像不尊重div的包含高度，而且我也不能让我想要的图像部分显示在上面，这就是我的意思：

HTML

<nav class="navbar navbar-inverse">
   <div class="container-fluid">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>                        
         </button>
         <a class="navbar-brand" href="#">Logo</a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
         <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Projects</a></li>
            <li><a href="#">Contact</a></li>
         </ul>
         <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
         </ul>
      </div>
   </div>
</nav>
<section id="about">
   <div class="container-fluid text-center">
      <div class="row content">
         <div class="col-lg-12">
            <h1>Welcome</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </div>
      </div>
   </div>
</section>
<section id="img">
   <div class="container-fluid">
   <div class="row content">
      <div id="imgcont">
         <div id="header">
            <div class="title">
               <h1>Title in image centered</h1>
            </div>
         </div>
      </div>
   </div>
   <div class="row content text-center">
      <h1>More content, same section </h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit.</p>
   </div>
</section>
<section id="howto">
   <div class="container-fluid">
      <div class="row content">
         <div class="col-lg-12">
            <h1>Welcome</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </div>
      </div>
   </div>
</section>

CSS：

body {
    color: white;
}

.navbar {
    margin-bottom: 0;
    border-radius: 0;
  padding-bottom: 0;
}


.row.content {
    min-height: 450px
}


#about {
    background-color: red;
}

#img {
    background-color: gray;
    height 100%;
}

#howto {
    background-color: #003300;
}

#imgcont {
    height: 50%;
}

#header {
    background: url(http://www.qygjxz.com/data/out/162/6155406-mountain-images.jpeg);
    background-size: cover;
    height: 100vh;
    position: relative;
    top: -10px;
    overflow: hidden;
}

.title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
}

.title h1 {
    text-transform: uppercase;
    margin: 0;
    font-size: 3rem;
    white-space: nowrap;
}

https://codepen.io/elunap/pen/ZaXKKK

我有3个部分，其中我有不同的内容，在第二部分我想调整图像看起来像这样，没有重叠图像和顶部。

这是我的目标：

https://imgur.com/a/OIeKt

有人可以指导我吗？

Answer 1

更改

#header {
    height: 100vh;
}

要

#header {
    height: 50%;
}

更新了示例：https://codepen.io/anon/pen/bYoRNq

如何根据div高度将照片调整为div

1 个答案: