Respify响应式图像库
Respify 是个简单的响应式图像库,可以从一系列 span 子节点的 data-media 和 src 属性解析图像,使用媒体查询来选择图像。在线演示
Respify可以在图像标签或任何其他标签上使用,但背景选项应设置为true
。从span子节点数组中重新指定wil pop,这意味着将首先解析列表中的最后一个节点。如果Respify找到一个匹配的媒体查询,它将使用相应的图像并停止搜索。
<span id="default-responsive" class="responsive-img" data-alt="This is an example of a responsive image"> <span src="img/yacht_race@mobile.jpg" data-media="(max-width: 30em)"></span> <span src="img/yacht_race@wide-mobile.jpg" data-media="(min-width: 30em) and (max-width: 48em)"></span> <span src="img/yacht_race@tablet.jpg" data-media="(min-width: 48em) and (max-width: 60em)"></span> <span src="img/yacht_race@desktop.jpg" data-media="(min-width: 60em) and (max-width: 80em)"></span> <span src="img/yacht_race@hires.jpg" data-media="(min-width: 80em)"></span> <noscript><img src="ext/img/yacht_race@hires.jpg" alt="A yacht race"></noscript> </span>
评论
ResponsifyJSjQuery 响应式图像插件
ResponsifyJS是个jQuery插件,可以让图像完全响应式,不会牺牲图像的主要部分。在线演示:http://responsifyjs.space/#demo
ResponsifyJSjQuery 响应式图像插件
0
Responsively Lazy延迟加载响应式图像的库
ResponsivelyLazy是一个可以延迟加载响应式图像的库。能够处理响应式图像、SEO友好(有效的HTML)并支持 WebP 格式。下载并安装下载缩小后的 css 和 js 文件或通过 npm
Responsively Lazy延迟加载响应式图像的库
0
Responsively Lazy延迟加载响应式图像的库
Responsively Lazy 是一个可以延迟加载响应式图像的库。能够处理响应式图像、SEO 友
Responsively Lazy延迟加载响应式图像的库
0