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

How to make images resize with the page

本文关键字：调整 何使 图像      更新时间：2023-09-26

我有一个显示图像的jQuery滑块，我正试图让它做出响应。下面是一个带确切示例的代码笔：http://codepen.io/anon/pen/plvsq

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

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

但这并没有起到任何作用。我正在努力实现一个效果，就像这个网站上的重新调整横幅：http://codepen.io/anon/pen/plvsq

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

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。

相关文章：