html - 图像消失，宽度为 :100% when trying to make images responsive

Question

我正在使用position:absolute；和 z 索引。

我想要一个大的背景图片，它会逐渐变成新的图片。我将在上面有一个表格，然后它们都必须能够向上滚动。 (我现在只是使用一些文本而不是表格)。

我不想固定背景图像 - 我希望它向上滚动，上面有任何内容。这就是为什么我没有使用任何 CSS 背景代码，因为我只能找到使背景固定的东西。

我所拥有的问题是我无法使图像响应。只要我把 width:100%;在图像消失的任何地方编码。

$(function() {
  $('.fadein img:gt(0)').hide();

  setInterval(function() {
    $('.fadein :first-child').fadeOut()
      .next('img')
      .fadeIn()
      .end()
      .appendTo('.fadein');
  }, 4000);
});

.fadein {
  position: absolute;
}

.fadein img {
  position: absolute;
  left: 0;
  top: 0;
}

#bg {
  z-index: 1;
}

#fg {
  z-index: 9;
  position: relative;
}

.img-responsive {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bg" class="fadein">
  <img class="img-responsive" src="images/1.jpg" />
  <img class="img-responsive" src="images/2.jpg" />
  <img class="img-responsive" src="images/4.jpg" />
  <img class="img-responsive" src="images/6.jpg" />
</div>
<div id="fg" class="container">
  <h1>text to enable scrolling</h1>
  <h1>text to enable scrolling</h1>
  <h1>text to enable scrolling</h1>
  <h1>text to enable scrolling</h1>
  <h1>text to enable scrolling</h1>
  <h1>text to enable scrolling</h1>
  <h1>text to enable scrolling</h1>
  <h1>text to enable scrolling</h1>
  <h1>text to enable scrolling</h1>
  <h1>text to enable scrolling</h1>
  <h1>text to enable scrolling</h1>
  <h1>text to enable scrolling</h1>
  <h1>text to enable scrolling</h1>
  <h1>text to enable scrolling</h1>
  <h1>text to enable scrolling</h1>
  <h1>text to enable scrolling</h1>
  <h1>text to enable scrolling</h1>
  <h1>text to enable scrolling</h1>

</div>

Answer 1

为了在#bg div 中保留绝对图像，您应该使其相对。

.fadein {position: relative;} 或#bg{position: relative;}