响应式图片的几种解决方案
来源:互联网 发布:晚上醒了就睡不着 知乎 编辑:程序博客网 时间:2024/05/23 01:22
在目前的前端开发中,我们经常需要进行响应式的网站开发。提起响应式,大家应该想到三个概念: 弹性布局, 弹性图片, 媒体查询。
本文着重介绍一下弹性图片,也就是响应式图片的解决方案。
A. js和服务端控制
$(function(){ function makeImageResponsive(){ var img = $('.cotent img'); var width = $(window).width(); if(width <= 480){ img.attr('src', '480.png'); }else if(width <= 800){ img.attr('src', '800.png'); }else{ img.attr('src', '1600.png'); } } $(window).on('resize load', makeImageResponsive);})
B. srcset属性
现在HTML5中对于img标签新增了一个srcset属性。
属性值为以逗号分隔的一个或多个字符串。每个字符串由以下组成:
a. 一个图像的URL。
b. 可选的, 空格后跟以下的其中一个
~ 一个宽度描述符,后面紧跟’w’符号。
~ 一个像素描述符,后面紧跟’x’符号。
当然这个属性可以配合sizes属性结合使用。
sizes属性可以设置一些类似媒体查询的规则。
例如:
sizes=’(max-width:300px) 200px, 400px’
这表示,如果满足小于300px的时候,图片宽度为200px,否则宽度为400px。
当然,这里用可以使用’x’ ‘calc’, ‘vw’等符号。
C. picture属性。
这个也是HTML5的新属性。
可以放置多个source标签,以指定不同的图像文件名,进而根据不同的条件进行加载。
用法:
- 创建标签。
- 里面放置标签用来展示可能用到的图像
- 对source添加srcset属性来指定图片URL,添加media属性,来规定媒体查询。
- 添加一个回退的元素
这个例子表示在大于800px的时候,展示ad002-l这个large图片。
在大于480px的时候,展示ad002-m这个medium图片。
否则,展示ad002小图片。
<picture> <source srcset='src/img/ad002-l.png' media='(min-width: 50em)'/> <source srcset='src/img/ad002-m.png' media='(min-width: 30em)'/> <img src="src/img/ad002.png"/></picture>
现在很多浏览器对于picture这个标签还不支持,所以我们需要用到picturefill.js来解决。
D. svg图片
SVG图片不是一个简单的图像,而是一个规则。所以可是很好的响应式,不过因为比较复杂,所以一般都是对于一些简单的图像使用svg,对于复杂,颜色多的图片,不采用SVG。
- 响应式图片的几种解决方案
- 响应式图片的3种解决方案
- 响应式图片的3种解决方案
- 响应式背景图片的几种方法
- 鼠标的几种响应
- 响应式图片的设计
- 响应式图片的设计
- 实现按钮响应的几种方法
- UGUI按钮的几种响应方式
- 图片上传的跨域问题的几种解决方案和细节及优缺点
- 图片上传的跨域问题的几种解决方案和细节及优缺点
- 响应式的嵌入内容和图片
- Bootstrap响应式图片的进一步处理
- 比例固定的响应式图片笔记
- Android 4.4从图库选择图片并裁剪,由于系统版本不同导致Uri的bug的几种解决方案
- 【CSS】响应式图片
- 实战响应式图片
- html5响应式图片
- 如何查看Linux中的全部用户
- JVM配置参数
- 野谈系列之高性能可定制化分布式发号器
- vs2015+Qt5.8+opencv 显示一幅图像
- jetty下项目解压目录及其配置端口
- 响应式图片的几种解决方案
- 大视野 1854 游戏 匈牙利算法
- 关于 Segmentation fault的总结
- 最小堆的应用之哈弗曼树5.2
- operator--Python内部操作符对应的函数
- React学习之相关堆栈调解器的实现(三十七)
- 安装svn与项目部署
- 自定义圆角进度条,不是很难,却有一些需要注意的地方
- 通用日期格式化工具类DateUtil