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

总结

学习记录。

相关推荐
彤银浦1 小时前
Web学习笔记3
前端·笔记·学习·html5
之歆1 小时前
Python-魔术方法-创建、初始化与销毁-hash-bool-可视化-运算符重载-容器和大小-可调用对象-上下文管理-反射-描述器-二分-学习笔记
笔记·python·学习
优乐美香芋味好喝1 小时前
2025年7月11日学习笔记&一周归纳——模式识别与机器学习
笔记·学习·机器学习
声网3 小时前
对话 AI 陪伴新宠 Tolan 创始人:拒绝「恋爱脑」,「非人」陪伴更受欢迎?丨 Voice Agent 学习笔记
人工智能·笔记·学习
丁满与彭彭3 小时前
嵌入式学习笔记--MCU阶段--day03中断
笔记·单片机·学习
艾莉丝努力练剑4 小时前
【C语言】学习过程教训与经验杂谈:思想准备、知识回顾(五)
c语言·开发语言·数据结构·学习·算法
future14124 小时前
游戏开发日记7.12
数据结构·学习·c#·游戏开发
阿群今天学习了吗5 小时前
pytorch环境配置
人工智能·pytorch·python·学习·机器学习
武昌库里写JAVA6 小时前
使用 Java 开发大数据应用:Hadoop 与 Java API 的结合
java·开发语言·spring boot·学习·课程设计
zlbbme_8 小时前
Android Studio学习笔记:为应用添加文本和图片
笔记·学习