html5 picture样式,html5提供的picture标签可以更好地解决图片响应式的问题

一、图片响应式设计的老方法。

在以前为图片做响应式设计的时候，一般用三种方法。

第一种，直接让图片和父容器保持100%：img {

width: 100%;

height: auto;

}

或者使用：img {

max-width: 100%;

height: auto;

}

max-width的好处是图片没有父容器大的时候，显示默认大小，如果超过了父容器，则和父容器保持一致。

第二种，利用背景图片的background-size属性。background-size:contain;

background-size:100%;

background-size:cover;

上面两种方法都是用的一张图片进行大小的控制。

第三种，利用media queries媒体查询实现不同的宽度用不同的图片。/* 当窗口宽度小于400px */

body {

background-image: url('1.jpg');

}

/* 当窗口宽度大于等于400px */

@media only screen and (min-width: 400px) {

body {

background-image: url('2.jpg');

}

}

二、html5提供的，最新的方法。

当然，html5提供的标签的思想依然是利用媒体查询的方法实现根据不同的设备宽度加载不同的图片，但是语法结构就更简单了。

和video和audio标签很像，提供了source源。

  

srcset属性是必须的，提供图片的来源。

media属性支持所有media queries媒体查询的写法。可以缺省。

最后定义一个标签，用于不支持picture标签的浏览器。

比如，墨刀这个网站就用了该技术。

    

具体效果可以点击查看。

遗憾的是，这么好的标签，IE还是拉了后腿。