Question

我想在我的网站中加入一个旋转滑块，但是为了让它占据整个屏幕的不同设备移动/桌面，它需要有一个width:100%，这使得图像不可见。我正在使用此库http://demo.tutorialzine.com/2010/11/rotating-slideshow-jquery-css3/中的代码，并且我已在http://jsfiddle.net/9mmzf7wh/1/上设置了演示

我已尝试设置width:auto和width:100%

Answer 1

我做了很多改动，但它的要点是#slideShow的绝对定位以及删除你所拥有的一堆边距和/或填充语句。

 #slideShowContainer {
    background: pink;
    overflow: auto;
    padding-bottom: 70%;
    height: 0;
    position: relative;
}
#slideShow {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position:absolute;
    background-color:#fff;
    z-index:100;
    -moz-box-shadow:0 0 10px #111;
    -webkit-box-shadow:0 0 10px #111;
    box-shadow:0 0 10px #111;
    z-index: 1;
}
#slideShow ul {
    list-style:none;
    overflow:hidden;
}

<强> Demo

具有动态宽度和高度的滑块图像

1 个答案: