随着我们的Retina荧幕越来越在生活中普及,随之而来的是每个图片都需要包含各自的 @2x
(甚至是 @3x
)版本,哪么我们在网页中该怎么办呢?今天「畅想资源」就向大家来介绍这个HTML5的实用新属性 srcset
的具体使用方法吧!(目前iOS 8中的Safari也已支持该功能啦!)
简介
srcset
属性是由W3C旗下的「响应式图片社区」首先提出的,目的是旨在为使用不同解析度的不同浏览器用户提供适合其浏览环境的图片大小的解决方案
代码
一般来说,我们只需要将 srcset
属性加入图片的 img
即可:
1 |
<img src="low-res.jpg" srcset="high-res.jpg 2x"> |
当然,你也可以同时加入 3x
甚至 4x
等的图片:
1 |
<img src="low-res.jpg" srcset="high-res.jpg 2x"> |
PS:「畅想资源」已完美使用「WP Retina 2x」等实用插件添加2x版本,现在所有Retina荧幕用户均可以看到高清的图片、表情等!
预览
在下图中如果显示 1x
,则说明你的系统并不需要高清支援或你的浏览器并不支持该属性,而如果显示 2x
,则说明你的浏览器是需要高清支援,而你的浏览器也支持该属性!