需要轮播为 100% 绝对位置答案

【问题标题】：Need carousel to be 100% with position absolute需要轮播为 100% 绝对位置
【发布时间】：2014-06-12 11:12:45
【问题描述】：

我正在尝试将一个旋转的转盘放在一起，但它无法让它做我想做的事情。我希望它是 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;
    }

【问题讨论】：

标签： html css height width carousel

【解决方案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。高度将根据图像的比例而变化。

【讨论】：