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 width设置为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。高度将根据图像的比例而变化。

需要旋转木马100％绝对位置

1 个答案: