如何仅显示一张图像并将其居中放置在滑块中？

Question

我正在使用iosslider，但似乎无法一次仅在滑块中显示一个图像。 我还试图将显示的单个图像居中。 这是我拥有的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;  
}

我基本上是想一次只在滑块中显示一个居中图像。 以下是我目前看到的内容。 如您所见，还显示了右侧的图像。

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

尝试调整窗口大小，您会看到我的问题。 我正在具有320x480分辨率的移动网页上运行此代码。

Answer 1

将图片的宽度/高度设置为100％，您也可以将其绝对定位：

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

Answer 2

好的，在这里使用javascript或jQuery来遍历您的一组图像是一件好事。 现在，当jQuery函数选择它时，将另一个类添加到居中或聚焦的图像中，例如<div class = 'iosSlider'> <div class = 'slider'> <div class="item current"> <img src="/images/nature1.png" /> </div> <div class="item"> <img src="/images/nature2.png" /> </div> </div> </div>

然后当下一幅图像成为焦点时，从第一幅图像中删除此类“当前”，并应用于第二幅图像，依此类推。 而对于这个班级里克·阿里根来说，这是allign: center; margin-left:auto; margin-right:auto; allign: center; margin-left:auto; margin-right:auto; 和其他必要的CSS。