Web 开发中的响应式图片解决方案
我们在使用响应布局的时候会考虑,手机上的图片没必要和电脑上的一样大。如果是从大到小的方法设计,那大屏幕的图片在小屏幕上会被缩小,增加了大量的空间。如果是从小到大的方法设计,那小屏幕的图片在大屏幕上会被拉伸到模糊。有什么方法可以兼顾小屏幕和大屏幕,这里引进了响应图片的概念。
响应式图片
我们知道响应式的核心就是根据屏幕的大小,选择不同的 CSS 样式,那么图片是不是也可以通过判断不同大小的屏幕,然后选择性的加载不同尺寸的图片,由 Filament Group 提出的响应式图片技术思想,有助于解决上面提到的问题。
不仅要同比的缩放图片,还要在小设备上降低图片自身的分辨率。
这项技术支持多数的现代浏览器,包括 IE8+、Safari、Chrome 和 Opera,以及这些浏览器的移动设备版本,在 FireFox 及一些旧浏览器中,则会优雅降级,我们仍可得到小图片的输出,但同时原始大图也会被下载。
Picturefill
Picturefill 允许 Web 开发人员根据不同的屏幕大小、视口大小、屏幕分辨率等情况提供不同的图片给用户。
使用方法
首先引入JS(需要在HTML文档头部引用)
<script src="picturefill.js"></script>
为了使你的网页能够有效的加载,建议增加一个异步属性的脚本标签。告诉浏览器可以异步加载 picturefill,不需要等待它加载完成之后再去加载其余的内容。如果你添加这个属性,你需要在引人 picturefill 之间加入一行脚本,同时也是为了让老的浏览器在 picturefill 还没有完成加载时遇到 picturefill 可以识别 picture
元素。
<head>
<script>
// Picture element HTML5 shiv
document.createElement( "picture" );
</script>
<script src="picturefill.js" async></script>
</head>
注意:如果你文档中已经包含了 HTML5 shiv(例如:Modernizr),那么你就不需要包含这段 JS 脚本。当然许多高级的使用者可不需要这样,而是选择像 Require.js 一样动态的加载 picturefill。(类似 AMD 和 CommonJS 的支持包括在脚本)。
一旦你已经包括 picturefill.js
,你就可以开始添加响应图像元素到您的网站,Picturefill 增加了对响应图像解决方案,包括图像元素和新的 img 元素属性的整个套件的支持。
使用 srcset
属性
<img srcset="examples/images/image-384.jpg 1x, examples/images/image-768.jpg 2x">
使用 srcset
和 sizes
属性
<img
sizes="(min-width: 40em) 80vw, 100vw"
srcset="examples/images/medium.jpg 375w,
examples/images/large.jpg 480w,
examples/images/extralarge.jpg 768w">
其中 sizes
定义 img
显示的尺寸,srcset
定义图片源以及图片的自然大小。浏览器会根据实际情况自主选择加载哪张图片。
使用 picture
属性
<picture>
<source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)">
<source srcset="examples/images/art-large.jpg" media="(min-width: 800px)">
<img srcset="examples/images/art-medium.jpg">
</picture>
picture
中的 type
属性
Picturefill 支持 SVG 和的 WebP 作为其核心的一部分,但以下 MIME 类型可以通过 typesupport
插件一起使用:
image/bmp
image/xbmp
image/jp2
image/vnd.ms-photo
video/vnd.mozilla.apng
<picture>
<source srcset="examples/images/large.webp" type="image/webp">
<img srcset="examples/images/large.jpg">
</picture>
CSS3伪类
我们都知道可以用 ::before
和 ::after
伪元素和 content
属性来动态显示一些内容或者做其它很酷的事情,而且在 CSS 2.1 中即被支持。不过 content
属性在 CSS 2.1 中只能用于这两个伪元素中,而在 CSS3 中,任何元素都可以使用 content
属性了,这个方法就是结合 CSS3 的 attr
属性和 HTML 自定义属性的功能:
<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">
@media (min-device-width:600px) {
img[data-src-600px] {
content: attr(data-src-600px, url);
}
}
@media (min-device-width:800px) {
img[data-src-800px] {
content: attr(data-src-800px, url);
}
}
当然这些方法也有不足之处,比如 PC 端宽屏幕需要加载两个图片文件,然后我们也要为此准备多张图片文件。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论