调整屏幕大小时如何在容器中保留响应图像

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>