Как сделать ползунок полностью отзывчивым?

Question

У меня проблема с изображениями слайдера моего сайта. Я установил свою ширину ползунка и ширину рамки внутреннего ползунка до 100%, но когда я изменяю размер экрана, размер изображения не изменяется. Также я установил ширину изображений в max-width:100% и их высоту до auto.

#sliderFrame { 
 
    position:relative; 
 
    width:100%; 
 
    margin: 0 auto; /*center-aligned*/ 
 
} 
 

 
#slider, #slider div.sliderInner { 
 
    width:1280px;height:auto;/* Must be the same size as the slider images */ 
 
    border-radius: 6px; 
 
} 
 

 
#slider { 
 
    background:#fff url(loading.gif) no-repeat 50% 50%; 
 
    position:relative; 
 
    transform: translate3d(0,0,0); 
 
    box-shadow: 0px 1px 5px #999999; 
 
} 
 

 
#slider a.imgLink, #slider .video { 
 
    z-index:2; 
 
    cursor:pointer; 
 
    position:absolute; 
 
    top:0px;left:0px;border:0;padding:0;margin:0; 
 
    width:100%;height:100%; 
 
} 
 

 
#slider div.loading { 
 
    max-width:100%; height:auto; 
 
    background:transparent url(loading.gif) no-repeat 50% 50%; 
 
    filter: alpha(opacity=60); 
 
    opacity:0.6; 
 
    position:absolute; 
 
    left:0; 
 
    top:0; 
 
    z-index:9; 
 
} 
 

 
#slider img, #slider>b, #slider a>b { 
 
    position:absolute; 
 
    border:none; 
 
    display:none; 
 
    max-width:100%; 
 
    height:auto; 
 
} 
 

 
#slider div.sliderInner { 
 
    overflow:hidden; 
 
    -webkit-transform: rotate(0.000001deg);/* fixed the Chrome not crop border-radius bug*/ 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    max-width:100%; 
 
    height:auto; 
 
}

<div id="sliderFrame"> 
 
    <div id="slider"> 
 
    <img src="image/Index_1600x500.jpg" alt="#cap1"/> 
 
    <img src="image/Index_TrackerPnale_1600x500.jpg"/> 
 
    <img src="image/Index_HyundaiSantafe_1600x500.jpg" alt="#cap2"/> 
 
    <img src="image/Index_Support.jpg" title="Support Team"/> 
 
    <img src="image/Index_SocialMedia_1600x500.jpg" title="Social Medias"/> 
 
    </div> 
 
</div>

Answer 1

Ваш CSS не очень много говорит о вашем HTML - Кроме того, мы не имеем ни малейшего понятия о том, что вы на самом деле подразумеваем под ползунком - Но следовать этой скрипку: https://jsfiddle.net/p3r1x5sj/ и увидеть очень минимален CSS, который вы ищете.

#sliderFrame { 
    width:100%; 
    height:100px; 
    position:relative; 
} 
#sliderFrame #slider { 
    width:100%; 
    height:100%; 
    position:relative; 
    background:#fff url(loading.gif) no-repeat 50% 50%; 
    box-shadow: 0px 1px 5px #999999; 
} 
#sliderFrame #slider img { 
    width:100%; 
    position:absolute; 
    top:0; 
    left:0; 
} 

img теги, которыми вы должны управлять. Кроме того, если вы не обрезаете изображения с помощью overflow:hidden; на своем внешнем контейнере, изображения могут быть разных высот. В этом случае вы можете рассмотреть возможность использования div s с background-images