内容滑块内的图像重复

Question

我有一个内容滑块，横跨整个屏幕。我将其宽度设置为100％。问题是内容div中的图像正在重复。图像大小为600 * 300。该页面应与所有屏幕分辨率兼容。我该如何解决这个问题？

Css代码

#slider, #slider div.sliderInner {
width:100%;height:250px;/* Must be the same size as the slider images */}

#slider {
background:black url(loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto; /*center-aligned*/
transform: translate3d(0,0,0);}

Html代码

<div id="slider">
<img src="images/image-slider-1.jpg" alt="" />
<img src="images/image-slider-2.jpg" alt="" />
<img src="images/image-slider-3.jpg" alt="" />
<img src="images/image-slider-4.jpg" alt="" />
<img src="images/image-slider-5.jpg" alt="" />
</div>

Answer 1

如果您使用css放置图像，请使用background-repeate:no-repeat;

为每张图片使用1次潜水。像

<div id="slider">

<div id="firstImg"><img src="" alt="" width="600" height="300" /></div>
<div id="secondImg"><img src="" alt="" width="600" height="300" /></div>
<div id="thirdImg"><img src="" alt="" width="600" height="300" /></div>
<div id="fourthImg"><img src="" alt="" width="600" height="300" /></div>
<div id="fifthImg"><img src="" alt="" width="600" height="300" /></div>

</div>

并将一些ID放到图像所包含的每个div中。请参阅我的更新示例。

<强> CSS

#slider {
width: 100%;
position: relative;
}

#firstImg {
float: left;
width: auto;
}

#secondImg {
float: left;
width: auto;
}
#thirdImg {
    float: left;
    width: auto;
}

#fourthImg {
    float: left;
    width: auto;
}

#fifthImg {
    float: left;
    width: auto;
}