响应式图片
发布在CSS随笔记录2015年1月14日view:3491
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

首先扔出一个demo让看官爽爽: http://responsiveimages.org/demos/art-direction/index.html

HTML

<picture>
<source media="(max-width: 25em)" srcset="iphone.png">
<source media="(max-width: 48em)" srcset="iphone@tablet.png">
<img src="iphone.png" alt="The iPhone Safari web browser showing the RICG website.">
</picture>

chrome38中增加了<picture>标签,结合不同的Media queries加载不同的图片资源 其中img是作为fallback方案 还有 srcset中可以为Retina做兼容

<picture>  
<source media="(max-width: 500px)" srcset="banner-phone.jpeg, banner-phone-HD.jpeg 2x">  
<img src="banner.jpeg" srcset="banner-HD.jpeg 2x" alt="The Breakfast Combo">
</picture>

用1x和2x让浏览器自行进行选择

在css中的使用方案是 -webkit-image-set

#test {
  background-image: url(assets/no-image-set.png); 
  background-image: -webkit-image-set(url(assets/test.png) 1x,url(assets/test-hires.png) 2x);
  background-image: -moz-image-set(url(assets/test.png) 1x,url(assets/test-hires.png) 2x);
  background-image: -o-image-set(url(assets/test.png) 1x,url(assets/test-hires.png) 2x);
  background-image: -ms-image-set(url(assets/test.png) 1x,url(assets/test-hires.png) 2x);
  width:200px;
  height:75px;
}

这样的用法比media query还要新和好用,第一个background-image作为fallback

好嘞~~~~~就这么多先

评论
发表评论
5年前
赞了此文章!
5年前
赞了此文章!
5年前

http://www.html-js.com/article/The-front-end-of-the-porter 看了这篇好文之后的一些新做法

WRITTEN BY
Stuinfer_Galen
前端开发工程师 | 一个1心不能2用的糟糕青年
TA的新浪微博
PUBLISHED IN
CSS随笔记录

分享一些CSS随笔,欢迎拍板

我的收藏