如何只顯示一個圖像並將它置於滑塊中？

我正在使用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分辨率的移動網頁上運行此操作。

enter image description here

來源

2012-12-03 Paul

給圖像寬度/ 100％的高度，你也完全可以放置它們：

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

來源

2012-12-03 14:23:16 Tomer

好做一所件事這裏使用的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;和其他必要的CSS。

來源

2012-12-03 14:25:54 Rizstien

如何只顯示一個圖像並將它置於滑塊中？

回答

相關問題