如何僅顯示一張圖像並將其居中放置在滑塊中？

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。