我正在使用 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 的移动网页上运行它。
最佳答案
给图片宽/高100%,你也可以绝对定位:
.iosSlider .slider .item img {
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
border: solid 1px #00ff00;
}
关于javascript - 如何只显示一张图片并将其置于 slider 中央?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13685115/