如何清除这个图像推子？

Question

​

(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);

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

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

​

我写了这个小图像推子，但我不确定如何让“下面的一些文本”被下推。#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来找出尺寸。