css溢出隐藏以显示定义的“窗口”内的图像div

Question

我试图设置原生JavaScript动画的CSS。将会有几个图像进入一个600px的“窗口”。当一幅图像滑入或滑出时，唯一可见的部分将成为窗口内图像的一部分。在开始javascript动画之前，我已经尝试过多次尝试使用CSS来设置它，其中包括诸如overflow之类的东西：隐藏在旋转div上并将其设置为宽度，但这似乎不起作用。

#rotator { 
     width: 600px; 
     height: 320px; 
     background: #131313; 
     /*text-align: left;*/ 
     /*display: inline-block;*/ 
     overflow: hidden; 
     /*position: relative;*/ 
     /*float: left;*/ 

    } 
    .box_wrapper { 
     width: 450px; 
     /*position: absolute;*/ 
     display: inline-block; 
     /*overflow: hidden;*/ 
    } 
<div id="rotator"> 
    <div class="box_wrapper"> 
     <h4>Header1</h4> 
     <img src="../img/kat_3.jpg" /><br/> 
    </div> 

    <div class="box_wrapper box_2"> 
     <h4>Header2</h4> 
     <img src="../img/kat_2.jpg" /><br/> 
    </div> 
</div> 

这些图像要么完全显示，要么完全不符合css属性。

Answer 1

您需要设置图像的宽度或高度，以便它们可以缩放到div中。

<style> 
    #rotator { 
    width: 600px; 
    height: 320px; 
    background: #131313; 
    overflow: hidden; 
    } 

    .box_wrapper { 
    width: 450px; 
    height: 100%; 
    display: inline-block; 
    } 
</style> 

$('.box_wrapper').each(function() { 
    var $el = $(this), $img = $el.find('img'), fixedRatio = 600/320, 
    ratio = $img.width()/$img.height(), 
    offset = $img.offset().top - $el.offset().top; 
    if (ratio > fixedRatio) { 
    $img.width($el.width()).height('auto'); 
    } else { 
    $img.height($el.height() - offset).width('auto'); 
    } 
});