画像グループの上部を隠すには？

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がトップを遮断するために与えることができます。

オーバーラップを防ぐため、br要素にCSSを追加できます。

例：

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