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-responsive类进行了更改。使用显示：flex可根据浏览器大小灵活调整图像。

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

{{1}}

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

2 个答案: