图像重叠的父div响应

我想要实现的是在父div的边界之外的图像，其工作在1280x1024。我怎样才能使这种效果反应？图像重叠的父div响应

HTML：

   <div class='row'> 
       <div class="divider"> 
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 wow fadeInRight" data-wow-delay="1s" data-wow-duration="1.5s"> 
         <img src="http://karsbarendrecht.nl/5/wp-content/uploads/2015/10/responsive.png" alt="laptop tablet phone responsive"/> 
        </div> 
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 wow fadeInRight" data-wow-delay="1s" data-wow-duration="1.5s"> 
         <h1>bla bla bla.</h1> 
        </div> 
       </div> 
      </div>

CSS：

.divider{ 
    margin-top:100px; 
    min-height:175px; 
    margin-bottom:100px; 
    background-size: cover!important; 
    background-attachment: scroll; 
    background-image: url('http://karsbarendrecht.nl/5/wp-content/uploads/2015/10/triangles.svg'); 
} 

    .divider div{ 
    top:-50px;

下图展示的我的问题，与上半部分是预期的效果。下半部分是将屏幕调整为较小分辨率时发生的情况。

来源

2015-10-19 Kars Barendrecht

通过将两者的背景图像和在HTML前方图像，并增加以下内容ng css规则它们都是相同的。

 .divider div{ 
      top:-50px; // placing the image slightly above the divider div 
      height:125%; // making the div containing the image bigger than the divider div 
     } 

     .divider img{ 
      width:100%; // just for this image because it isnt wide enough 
      position:absolute; // make sure the image listens to top:-50px; 
     }

PS：图像缩放，因为Twitter的引导的CSS的：

img { 
    height: auto; 
    max-width: 100%; 
}

来源

2015-10-19 20:50:13

这个问题似乎是图像大小本身，但父div不是，在这种情况下，我会改变像素的值为vh和vw的值（这些是“视口高度”的百分比和例如高度和宽度您正在调整窗口大小的）：“veiwport宽度”。

margin-top:100px;

将成为

margin-top:8vh;

来源

2015-10-19 19:01:58

你是对这个问题，但视口的高度不能在窗口大小调整而改变。百分比确实如此，但是当高度为100％时，它不会占用父项的100％，但它占据了屏幕的100％。 P.S：边距只是位置，175px高度是我想看到的变化百分比，所以它缩放，但我似乎无法使它的工作。 –

图像重叠的父div响应

回答

相关问题