HTML5学习系列之响应式图像

HTML5学习系列之响应式图像


前言

学习记录


响应式图像

响应视图大小

容器

  • srcset:图片地址,必需有。
  • media:设置媒体查询。
  • sizes:设置宽度。
  • type:设置MIME类型。
  • 尝试使用兼容picture。

响应屏幕方向

在picture中的source中通过设置media、orientation、srcset。

响应像素密度

  • 在picture中的source中的最后".png" 后加2x。
  • 如果是1x,直接可不用加后缀名。

响应图像格式

支持加载webp就加载该格式,如果不支持就不加载。

自适应像素比

srcset中包含的元素比较多。

自适应视图宽

html 复制代码
<img width="500" srcset="
	images/2000.png 2000w,
	images/1500.png 1500w"
	sizes="
	(max-width:500px) 500px,
	(max-width:1000px) 1000px"
	src="images/500.png"
	/>

总结

学习记录。

相关推荐
Broken Arrows4 小时前
Linux学习——管理网络安全(二十一)
linux·学习·web安全
今天也要学习吖5 小时前
谷歌nano banana官方Prompt模板发布,解锁六大图像生成风格
人工智能·学习·ai·prompt·nano banana·谷歌ai
雁于飞5 小时前
vscode中使用git、githup的基操
笔记·git·vscode·学习·elasticsearch·gitee·github
rannn_1115 小时前
【Javaweb学习|实训总结|Week1】html基础,CSS(选择器、常用样式、盒子模型、弹性盒布局、CSS定位、动画),js(基本类型、运算符典例)
css·笔记·学习·html
wanzhong23337 小时前
ArcGIS学习-20 实战-地形研究
学习
wanzhong23337 小时前
ArcGIS学习-20 实战-县域水文分析
学习·arcgis
小马学嵌入式~7 小时前
嵌入式 SQLite 数据库开发笔记
linux·c语言·数据库·笔记·sql·学习·sqlite
索迪迈科技7 小时前
java后端工程师进修ing(研一版 || day40)
java·开发语言·学习·算法
武文斌778 小时前
arm启动代码总结
arm开发·嵌入式硬件·学习