Question

我有一个显示图像的jQuery滑块，我试图让它响应。这是一个具有确切示例的codepen：http://codepen.io/anon/pen/plvsq

正如您所看到的，如果浏览器变得更小或更大，图像不会重新调整大小。我尝试过使用

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

但这没有做任何事。我正试图在此网站上实现类似重新调整大小的横幅效果：http://codepen.io/anon/pen/plvsq

Answer 1

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

Answer 2

http://jsfiddle.net/5L1jmjy5/

#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; }

这里是使用ccs3媒体查询方法工作的示例。如果你想没有css媒体查询，那么使用less或jquery。

如何使页面调整图像大小

2 个答案: