Изображения Внутри содержимого Ползунок получает повторяющийся

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> 

и поместите некоторые идентификаторы в каждый 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; 
}