响应式web设计--图片大小自适应的三种方法

整理于《响应式web设计 HTML5和CSS3实践指南》一书



①基于宽度百分比

<div class='img-wap'>
<img alt='' class='img' src='#'>
</div>

对于上面的图片，我们可以将它所属的div宽度用百分比固定，然后让图片自适应div的宽度和高度

.img-wap{
float:left;
width:40%;
}
.img{
max-width:100%;
height:auto;
}

②创建设备的cookie，根据cookie服务器返回相应大小的图片

另外一种减少网络带宽并能提高页面加载速度的方法是创建一个基于用户设备屏幕尺寸的cookie，当用户请求图片时，服务器端根据客户端的请求决定返回何种尺寸的图像。

用JavaScript设置cookie的方法：

document.cookie="screen.dimensions=" + screen.width +"x" + screen.height;

③基于媒体查询

创建一个媒体查询，该媒体查询将检测浏览器窗口的大小。如根据宽度是否大于1024px选择css样式：

@media screen and (max-width:1024px){...}
@media screen and (min-width:1025px){...}

下面给出一个完整的示例：

<img alt="" src="#" class="img2">

@media screen and(max-width:1024px){
img.img2{width:200px;}
}
@media screen and(min-width:1025px){
img.img2{width:300px;}
}

img.img2{height:auto;}