javascript - 如何只显示一张图片并将其置于 slider 中央？

Question

我正在使用 iosslider但似乎不能一次只在 slider 中显示一张图像。我也在尝试将显示的单个图像居中。这是我对 HTML 的看法:

HTML:

<div class = 'iosSlider'>
    <div class = 'slider'>
        <div class="item">
            <img src="/images/nature1.png" />
        </div>
        <div class="item">
            <img src="/images/nature2.png" />
        </div>
    </div>
</div>

我的 CSS 看起来像这样:

.iosSlider {
/* required */
position: relative;
top: 0;
left: 0;
overflow: hidden;

width: 100%;
height: 300px;

border: solid 1px #ff0000;
}

/* slider */
.iosSlider .slider {
/* required */
width: 100%;
height: 100%;
}

/* slide */
.iosSlider .slider .slide {
/* required */
float: left;

width: 100%;
height: 100%;
}

.iosSlider .slider .item img {
width: auto;
height: 300px;

border: solid 1px #00ff00;  
}

我基本上是试图在 slider 中一次只显示一个居中的图像。下面是我目前看到的。如您所见，右侧的图像也显示出来。

知道如何使用我的 CSS 做到这一点吗？

尝试调整窗口大小，您会看到我的问题。我在分辨率为 320x480 的移动网页上运行它。

Answer 1

给图片宽/高100%，你也可以绝对定位:

 .iosSlider .slider .item img {
     width: 100%;
     height: 100%;
     position:absolute;
     top:0;
     left:0;
     border: solid 1px #00ff00;  
}