标签：style c class blog code java
图片是页面中较为重要的元素之一，在目前流行的响应式设计当中，图片也需要随之做出变化，本文就给出了目前业界针对响应式图片给出的各种解决方案。
对img元素增加srcset属性
规范地址：http://www.w3.org/TR/html-srcset/
在img的srcset属性中可以提供若干图片资源地址，并附加使用图片的条件描述，浏览器可根据使用条件来使用对应的资源。srcset的格式要求是：图片资源地址+可选的宽度描述+可选的高度描述+可选的像素密度描述，多个资源和描述组合之间用逗号分隔，例如：
<img alt="The Breakfast Combo" src="banner.jpeg" srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x">
例如在上面的例子中，“banner-HD.jpeg 2x”表示当设备像素密度为2时使用该图像资源。“banner-phone.jpeg 100w”表示浏览器视口宽度为100像素时使用该资源。
当使用像素密度条件时，如果没有提供图片渲染尺寸，浏览器会自动将图片渲染尺寸设置为符合像素密度的大小。例如，图片本身尺寸为400x400，像素密度为2x，那么浏览器在渲染的时候图片尺寸就变为200x200。当然建议还是手动写上图片尺寸，以减少浏览器的负担。
目前只有像素密度描述被Chrome支持，视口描述目前均不支持。（http://stackoverflow.com/questions/14397458/which-browsers-support-the-img-srcset-attribute）
picture元素
规范地址：http://www.w3.org/TR/html-picture-element/
标签：style c class blog code java
原文地址：http://www.cnblogs.com/jz1108/p/3755424.html
