Question

我有一个容器：左右两侧的宽度为950px + 25px填充。如果浏览器窗口我在1000px以下，容器将宽度调整为两个站点上的94％+ 3％填充。

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

我的问题是，这个解决方案没有响应。由于“位置：绝对”，我也有一个556px的固定高度。否则内容属于Slideshow-Div。但如果我用智能手机打开网站，556px对于手机屏幕来说太高了。现在，我不知道如何解决响应问题。我想我需要“position：absolute”来克服我的Container上的填充。我该怎么办？

#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以适应。

您必须调整填充底部以适合您的图像，但这应该适合您。

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

位置：绝对高度无响应

1 个答案: