如何隱藏一組圖像的頂部？

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>