画面のサイズを変更するときに応答する画像をコンテナ内に保持する方法

Question

コンテナ内に画像があります。画像の一部を保持するために、ネガの底を使用する必要があります。画面を小さくして、画像が消えるだけですが、どうすればこの問題を解決できますか？

HTML：

</section> 
<section id="img"> 
    <div class="container-fluid"> 
    <div class="row content"> 
     <div id="imgcont"> 
     <img class="img-responsive" src="http://www.qygjxz.com/data/out/162/6155406-mountain-images.jpeg" /> 
     <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> 

はCSS：

#imgcont { 
     overflow: hidden; 
     height: 400px; 
     max-height: 400px; 
     position: relative; 
} 



#imgcont .img-responsive { 
      display: block; 
     width: 100%; 
     height: auto; 
     position: absolute; 
     bottom: -500px; 
    } 


.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/Ebwwjv

またはこの周りの他の方法はありますか？これは本当に私を気にしています。

Answer 1

私は.imgの応答性クラスを#imgcontに変更を加えました。使用されているディスプレイ：flexを使用して、ブラウザのサイズに応じて画像を柔軟にします。

body { 
 
\t color: white; 
 
} 
 

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

 

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

 

 
#about { 
 
\t background-color: red; 
 
} 
 

 
#img { 
 
\t background-color: gray; 
 
\t height 100%; 
 
    object-fit: contain; 
 
} 
 

 
#howto { 
 
\t background-color: #003300; 
 
} 
 

 
#imgcont { 
 
     
 
     overflow: hidden; 
 
     height: 400px; 
 
     max-height: 400px; 
 
     position: relative; 
 
} 
 

 

 

 
#imgcont .img-responsive { 
 
\t  display: flex; 
 
     width: 100%; 
 
     height: auto; 
 
     position: absolute; 
 
    } 
 

 

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

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

<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"> 
 
     <img class="img-responsive" src="http://www.qygjxz.com/data/out/162/6155406-mountain-images.jpeg" /> 
 
     <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>

Answer 2

レスポンシブなバナー画像については、コードからcssの下にコメントするだけです。

#imgcont .img-responsive { 
 
\t  display: block; 
 
     width: 100%; 
 
     height: auto; 
 
     position: absolute; 
 
     bottom: -500px; 
 
    }