Javascript 如何使图像随页面调整大小

我有一个jQuery滑块，可以显示图像，我正试图让它响应。下面是一个带有确切示例的代码笔：

如您所见，如果浏览器变小或变大，图像不会重新调整大小。我试过使用

img { max-width: 100%; height: auto; }

但这并没有起到任何作用。我正在尝试实现一种效果，就像这个站点上的重新调整大小横幅：

---

下面是使用ccs3媒体查询方法的示例。如果您不想使用css媒体查询，请使用less或jquery

在编辑css div并放大和缩小后，它似乎可以调整大小。img{width:100%；min width:100%；height:auto；}这似乎不起作用，

.sliderItem { float: left; position: relative; width:100%;}
.sliderItem div { min-width: 100%; width:100%}
.sliderItem img { min-width: 100%; width:100%;} 

#sliderWrapper{ 
    min-width : 300px;
    min-height : 150px;
    overflow : hidden;
    position : relative;
    margin : 0 auto;
}

@media (max-width : 1400px){
    #sliderList li { max-width:1400px; }
    #sliderWrapper{ max-width:1400px; height:350px; }
}

@media (max-width : 1200px){
    #sliderList li { max-width:1200px; }
    #sliderWrapper{ max-width:1200px; height:300px; }
}

@media  (max-width : 900px){
    #sliderList li { max-width:900px; }
    #sliderWrapper{ max-width:900px; }
    #sliderWrapper{ max-width:1200px; height:250px; }
}

@media  (max-width : 768px){
    #sliderList li { max-width:768px; }
    #sliderWrapper{ max-width:768px; height:200px; }
}

@media  (max-width : 300px){
    #sliderList li { max-width:300px; }
    #sliderWrapper { max-width:300px; height:150px; }
}

.sliderItem div { width:100%; }
.sliderItem img { width:100%; min-height:150px; }