概述
学习目标：
学习实现一个响应式图像：根据显示设备的分辨率不同加载不同的类型的图片，防止带宽的浪费。同时，在改变设备类型或者分辨率时，能够及时加载对应的图片。
学习内容：
响应式图像教程 - 阮一峰的网络日志
PLACEHOLD.IT - 用来占位的不同大小的图片生成工具
学习产出：
- srcset属性用来指定多张图像，适应不同像素密度的屏幕。解决像素密度的适配。
- sizes属性列出不同设备的图像显示宽度，如果希望不同尺寸的屏幕，显示不同大小的图像，srcset属性就不够用了，必须搭配sizes属性。解决屏幕大小的适配。
- 如果要同时适配不同像素密度、不同大小的屏幕，就要用到<picture>标签。它是一个容器标签，内部使用<source>和<img>，指定不同情况下加载的图像。
- 用HTML来实现响应式图片比较简单，当然，响应式图片也可以通过CSS和JavaScript来实现。
最后
以上就是昏睡金针菇为你收集整理的HTML基础--响应式图片学习目标：学习内容：学习产出：的全部内容，希望文章能够帮你解决HTML基础--响应式图片学习目标：学习内容：学习产出：所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
![[前端笔记——多媒体与嵌入] 7.嵌入技术+位图、矢量图+响应式图片1.嵌入技术2.位图、矢量图3.响应式图片](/uploads/reation/bcimg13.png)
发表评论 取消回复