html - 需要轮播是 100% 绝对位置

Question

我正在尝试将旋转传送带放在一起，但无法让它按照我的要求进行操作。我希望它的宽度为 100%，并相应地调整高度，将内容向下推。

每当我调整窗口大小时，绝对定位的图像就会从应该调整大小的容器中出来。

有什么想法吗？

谢谢。

这是我的设置。轮换工作正常，因为我设置了相关的 javascript。这只是我遇到问题的高度。

html

    <div id="myslider">
    <img src="myurl" class="active" >
    <img src="myurl">
    </div>

CSS

    #myslider {
    position:relative;
    width:100%; 

    }


    #myslider IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;

    }


    #myslider IMG.active {
    z-index:10;
    opacity:1.0;
    }


    #myslider IMG.last-active {
    z-index:9;
    }

Answer 1

是的，如果您将 img 宽度设置为 100%

#myslider IMG {
  position:absolute;
  top:0;
  left:0;
  z-index:8;
  opacity:0.0;
  width: 100%; /* add this */ 
}

代码笔:http://codepen.io/anon/pen/JEphu

这将使您的图像始终是其容器的 100%。在这种情况下，您的#myslider div。高度将根据图像的比例而变化。