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"
	/>

总结

学习记录。

相关推荐
天水幼麟6 小时前
动手学深度学习-学习笔记(总)
笔记·深度学习·学习
天水幼麟8 小时前
动手学深度学习-学习笔记【二】(基础知识)
笔记·深度学习·学习
沧海一笑-dj9 小时前
【51单片机】51单片机学习笔记-课程简介
笔记·学习·51单片机·江科大·江科大学习笔记·江科大单片机·江科大51单片机
老虎06279 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
大苏打seven10 小时前
Docker学习笔记:Docker网络
笔记·学习·docker
Green1Leaves12 小时前
pytorch学习-9.多分类问题
人工智能·pytorch·学习
慕y27412 小时前
Java学习第十五部分——MyBatis
java·学习·mybatis
碣石潇湘无限路13 小时前
【AI篇】当Transformer模型开始学习《孙子兵法》
人工智能·学习
future141214 小时前
C#每日学习日记
java·学习·c#
碎叶城李白16 小时前
若依学习笔记1-validated
java·笔记·学习·validated