最稳的图片响应式写法是max-width: 100% + height: auto，可防塌陷、溢出和变形；SVG图标需删width/height属性、保留viewBox，并用容器尺寸+currentColor控制；严格适配固定区域需组合width、aspect-ratio与object-fit。
用 max-width: 100% + height: auto 是最稳的起点
多数人一上来就写 width: 100%，结果在 flex 容器或无宽父元素里图片塌陷、溢出或错位。真正防崩的写法是：max-width: 100% 控制上限，height: auto 保比例——浏览器会按原始宽高比自动算高度，不会拉伸变形。
常见错误现象：
- 只写
width: 100%，父容器没设宽，图片撑满整个视口 - 同时写死
width和height，原图是 1:1 却塞进 16:9 容器，边缘被切或糊成马赛克 - 给图标加
font-size试图缩放，对<img alt="HTML图标图片怎么自适应大小？图标缩放设置步骤" >或<svg></svg>完全无效
适用场景：文章正文插图、CMS 后台生成的内容区、邮件模板等不可控图片源。
<svg></svg> 图标必须删掉 width/height 属性，只留 viewBox
内联 SVG（即直接写 <svg></svg>）如果带了 width="24" 和 height="24"，再用 CSS 缩放就会失效或模糊——因为浏览器优先按 HTML 属性渲染，CSS 只能二次缩放，不响应像素密度。
立即学习“前端免费学习笔记（深入）”；
正确做法：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 删掉所有
width和height属性，只保留viewBox="0 0 24 24" - 用 CSS 控制外层容器尺寸，比如
.icon { width: 2rem; height: 2rem; } - 这样缩放时 SVG 矢量路径重绘，暗色模式下也能继承
currentColor颜色变量
别用 viewBox 当缩放工具：它只是定义坐标系，不是尺寸控制开关。
需要填满固定容器？object-fit: cover + aspect-ratio 才可靠
比如卡片头图、用户头像、按钮图标，要求“严格放进 48×48px 区域且不露白”，单靠 max-width 不够。必须组合使用：
-
width: 100%让图片占满容器宽度 -
aspect-ratio: 1 / 1（或16 / 9）让浏览器自动算出高度，避免塌陷 -
object-fit: cover强制等比缩放并裁剪多余部分
注意：object-fit 必须配合显式宽高才生效，光写 object-fit: cover 没用；老浏览器（Chrome
高清屏下图标变糊？srcset 不是可选项，是必填项
srcset 和 sizes 不改变显示大小，只决定加载哪张图。如果你只有一张 icon-24.png，在 2x 屏上会被拉伸到 48 物理像素，必然糊。
正确配置示例：
<img src="icon-24.png"
srcset="icon-24.png 1x, icon-48.png 2x"
alt="menu">
关键点：
- 文件名要体现分辨率（如
icon-48.png），否则容易混淆 -
srcset中的1x/2x是设备像素比，不是屏幕尺寸 - 不要指望浏览器自动选图——没配
srcset，它永远只加载src那张
最常被忽略的是：SVG 图标虽是矢量，但在 <img src="xxx.svg" alt="HTML图标图片怎么自适应大小？图标缩放设置步骤" > 场景下，依然要配 srcset，否则某些安卓 WebView 会降级渲染为位图。
