响应式图片

最新推荐文章于 2023-08-25 07:48:51 发布

Z19871124123456

最新推荐文章于 2023-08-25 07:48:51 发布

阅读量78

点赞数

原文链接：http://www.cnblogs.com/Mr-W/p/7400731.html

版权

<picture>元素与<source>元素

例如需要分别在小于640px 大于640px 小于960px 和大于960px的3个区域内使用small.jpg medium.jpg large.jpg可以这么编码

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>响应式图片</title>
 8 </head>
 9 <body>
10     <picture>
11         <source media="(max-width:640px)" srcset="small@2x.jpg 2x, small.jpg 1x"/>
12         <source media="(max-width:960px)" srcset="medium@2x.jpg 2x, medium.jpg 1x"/>
13         <source srcset="large@2x.jpg 2x, large.jpg 1x"/>
14         <img src="small.jpg" alt="">
15     </picture>
16 </body>
17 </html>

分析

max-width:640px  表示页面不足640px

small@2x.jpg 2x, small.jpg 1x  告诉浏览器该来源为同一素材提供了两种清晰度的版本

转载于:https://www.cnblogs.com/Mr-W/p/7400731.html

优惠劵

Z19871124123456

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
响应式图片

<picture>元素与<source>元素例如需要分别在小于640px 大于640px 小于960px 和大于960px的3个区域内使用small.jpg medium.jpg large.jpg可以这么编码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <...
复制链接

扫一扫