Position:absolute 高度没有响应

Question

我有一个容器：宽度 950px + 左右站点的内边距 25px。如果浏览器 windows 我在 1000px 以下，容器将两个站点的宽度调整为 94% + 3% padding。

在顶部，有一个 Div，其中有 4 张图片和幻灯片（同时只有一张图片）。幻灯片的 Div 应具有整个容器的全宽（宽度+填充）。

我的问题是，此解决方案没有响应。因为 "position: absolute" 我也有 556px 的固定高度。否则内容在Slideshow-Div下。但如果我用智能手机打开网站，556px 对于手机屏幕来说太高了。现在，我不知道如何解决响应问题。我想我需要 "position: absolute" 来克服容器上的填充。我能做什么？

#cycler {
  position: relative;
  height: 556px;
}
#cycler img {
  position: absolute;
  z-index: 1;
  max-width: 1000px !important;
  margin-top: -33px;
  margin-left: -25px;
}
#cycler img.active {
  z-index: 3
}

<div id="cycler">
  <img src="/images/startseite-familie.jpg" style="" class="active">
  <img src="/images/startseite-familie-mit-kind.jpg" style="">
  <img src="/images/startseite-alleinerziehende-mutter.jpg" style="">
  <img src="/images/startseite-geschwister.jpg" style="">
</div>

Answer 1

通过查看您上面的代码，我调整了您的 css 以适应。

您必须调整 padding-bottom 以适合您的图像，但这应该适合您。

#cycler {
  position: relative;
  height: 0;
  /* 
   * REPLACE HEIGHT WITH PADDING BOTTOM %, 
   * WHICH WORKS FROM THE SCREEN WIDTH 
   * THIS MAKING THE HEIGHT RESPONSIVE
   **/
  padding-bottom: 40%;
}
#cycler img {
  position: absolute;
  z-index: 1;
  /*
   * SET THE MAX-WIDTH TO 100% 
   * WHICH WILL ONLY FILL THE CURRENT CONTAINER
   **/
  max-width: 100% !important;
  margin-top: -33px;
  margin-left: -25px;
}
#cycler img.active {
  z-index: 3
}

Position:absolute 高度没有响应

Position:absolute with height is not responsive

css

position

response

absolute