如何隐藏一组图像的顶部？

Question

我想隐藏所有图像的顶部。我尝试使用clip，但这需要图像是固定的或绝对的。这组图像是滚动类型是否有任何方法来隐藏图像的顶部。下面是一个例子。

<style> 
    #rightCol{ 
     overflow-x: hidden; 

     overflow-y: scroll; 
     max-height: 82vh; 
    } 
    body{ 
    overflow:hidden; 
    } 
</style> 

<div class="row"> 
<div class="col-md-9" style="padding:0; border:ridge; " id="rightCol"> 
<img class="img-responsive" src="<?php echo base_url('assets/images/image_1.jpg') ?>" /> 
<br> 
<img class="img-responsive" src="<?php echo base_url('assets/images/image_2.jpg') ?>" /> 
<br> 
<img class="img-responsive" src="<?php echo base_url('assets/images/image_3.jpg') ?>" /> 
<br> 
<img class="img-responsive" src="<?php echo base_url('assets/images/image_4.jpg') ?>" /> 
<br> 
<img class="img-responsive" src="<?php echo base_url('assets/images/image_5.jpg') ?>" /> 
<br> 
<img class="img-responsive" src="<?php echo base_url('assets/images/image_6.jpg') ?>" /> 
<br> 
</div> 
</div> 

Answer 1

，您可以给.img-responsive负margin到顶部切断。

为了防止可见的重叠，可以将一些CSS添加到br元素。

例子：

#rightCol { 
 
    overflow-x: hidden; 
 
    overflow-y: scroll; 
 
    max-height: 82vh; 
 
} 
 

 
body { 
 
    overflow: hidden; 
 
} 
 

 
.img-responsive { 
 
    margin-top: -100px; /* adjust this to change the amount cropped at top */ 
 
    display: block; 
 
} 
 

 
/* acts as spacing between images */ 
 
.img-cover { 
 
    position: relative; 
 
    content: ''; 
 
    background: white; 
 
    height: 5px; 
 
    display: block; 
 
}

<div class="row"> 
 
    <div class="col-md-9" style="padding:0; border:ridge; " id="rightCol"> 
 
    <img class="img-responsive" src="https://placehold.it/300x300" /> 
 
    <br class="img-cover"> 
 
    <img class="img-responsive" src="https://placehold.it/300x300" /> 
 
    <br class="img-cover"> 
 
    <img class="img-responsive" src="https://placehold.it/300x300" /> 
 
    <br class="img-cover"> 
 
    <img class="img-responsive" src="https://placehold.it/300x300" /> 
 
    <br class="img-cover"> 
 
    <img class="img-responsive" src="https://placehold.it/300x300" /> 
 
    <br class="img-cover"> 
 
    <img class="img-responsive" src="https://placehold.it/300x300" /> 
 
    <br class="img-cover"> 
 
    </div> 
 
</div>