調整屏幕大小時如何在容器中保留響應圖像

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

您只需要在代碼的CSS下方注釋一下響應式橫幅圖片即可。

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

Answer 2

我對#imgcont .img響應類進行了更改。 使用display：flex使圖像根據瀏覽器大小靈活顯示。

 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%; object-fit: contain; } #howto { background-color: #003300; } #imgcont { overflow: hidden; height: 400px; max-height: 400px; position: relative; } #imgcont .img-responsive { display: flex; width: 100%; height: auto; position: absolute; } .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; } 

 <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>