Question

＆＃13;

(function($) {
        var $panoramas = $('#header_rotator').children();
        var index = Math.floor(Math.random() * $panoramas.length);
        $panoramas.eq(index).show();

        setInterval(function() {
            $panoramas.eq(index).fadeOut(1000);
            index = (index + 1) % $panoramas.length;
            $panoramas.eq(index).fadeIn(1000);
        }, 5000);
    })(jQuery);

＆＃13;

#header_rotator {
  position: relative;
  background-color: black;
}
#header_rotator .panorama-outer {
  display: none;
  position: absolute;
}
#header_rotator .panorama-outer .panorama-inner {
  position: relative;
}
#header_rotator .panorama-outer .panorama-inner img {
  max-width: 733px;
  width: 100%;
}
#header_rotator .panorama-outer .panorama-inner .header_caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: white;
  background: rgba(0,0,0,.75);
  padding: 5px 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="header_rotator">
     <div class="panorama-outer">
        <div class="panorama-inner">
            <img src="http://lorempixel.com/733/200/cats/1" alt="Alt text">

            <div class="header_caption">Cat 1</div>
        </div>
    </div>
    <div class="panorama-outer">
        <div class="panorama-inner">
            <img src="http://lorempixel.com/733/200/cats/2" alt="Alt text">

            <div class="header_caption">Cat 2</div>
        </div>
    </div>
    <div class="panorama-outer">
        <div class="panorama-inner">
            <img src="http://lorempixel.com/733/200/cats/3" alt="Alt text">

            <div class="header_caption">Cat 3</div>
        </div>
    </div>
    <div class="panorama-outer">
        <div class="panorama-inner">
            <img src="http://lorempixel.com/733/200/cats/4" alt="Alt text">

            <div class="header_caption">Cat 4</div>
        </div>
    </div>
    <div class="panorama-outer">
        <div class="panorama-inner">
            <img src="http://lorempixel.com/733/200/cats/5" alt="Alt text">

            <div class="header_caption">Cat 5</div>
        </div>
    </div>

</div>

<p>some text below</p>

＆＃13;

我写了这个小图片推子，但我不确定如何获得＆＃34;下面的一些文字＆＃34;被推倒#header_rotator的高度为0，因为它的内容是绝对定位的，但它们需要绝对定位才能使图像堆叠。

我无法对#header_rotator的高度进行硬编码，因为它需要是可以响应的（响应）。

那么我该怎样做才能修复#header_rotator的高度？

Answer 1

如果图片的大小始终为733×200像素，则解决方案如下：

如果窗口较宽，则为#header_rotator提供200px的底部填充;如果窗口较窄，则为27％。 27％是图片的宽高比，它起作用，因为填充百分比是窗口宽度的百分比而不是高度。

所以，

#header_rotator {
  position: relative;
  background-color: black;
  padding-bottom:27%;  /* this line is added in at the top */
}

...

@media (min-width:733px) { /* this is new */
  #header_rotator {
   width:733px;
   padding-bottom:200px
  }
}

请参阅updated fiddle。

如果图片并非总是733×200像素，您可以做类似的事情，但也许可以使用Javascript查找尺寸。

如何清除这个图像推子？

1 个答案: