Question

我正在尝试为原生javascript动画设置css。将有几个图像进入600px的“窗口”。当一个图像滑入或滑出时，唯一可见的部分将是窗口内图像的一部分。在我开始javascript动画之前，我曾多次尝试用css设置它，其中包括溢出：隐藏在旋转器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');
  }
});

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

1 个答案: