真正可靠的图片自适应必须同时满足保持宽高比、有参照上下文、不被内联属性劫持；仅设height或width会导致拉伸，max-width:100%;height:auto需父容器提供宽度且无内联尺寸覆盖。
单独设 height 或 width 属性，或只写 height: 200px、width: 100%，都会导致图片拉伸变形——这不是 bug，是浏览器默认渲染行为。真正可靠的自适应，必须同时满足「保持宽高比」+「有参照上下文」+「不被内联属性劫持」三个条件。
img { max-width: 100%; height: auto; } 为什么有时不生效
这组样式本身没问题，但它的生效依赖父容器提供可计算的宽度，并且图片不能被其他规则覆盖。
- 父容器是空
<div> 或仅设 <code>display: flex却没给width/max-width，100%就失去参照，图片按原始尺寸渲染 -
<img style="max-width:90%" style="max-width:90%" alt="HTML图片自适应高度与宽度的设置教程" >这类内联属性会强制覆盖height: auto，高度永远卡死 - 在
display: flex容器中，<img alt="HTML图片自适应高度与宽度的设置教程" >默认带min-width: auto，会阻止它随容器变窄而缩放，需额外加min-width: 0 - 全局 CSS（如 Bootstrap）可能写了
img { max-width: none; }，直接顶掉你的规则 - 容器必须有明确尺寸：
.card { width: 300px; height: 200px; }或.card { aspect-ratio: 4/3; } - 图片要铺满容器：
img { width: 100%; height: 100%; object-fit: cover; }（裁剪式填满）或object-fit: contain（完整显示，留白正常） - iOS Safari 旧版需加
-webkit-object-fit: cover;；IE 完全不支持，fallback 只能用background-image，但会丢失alt和 SEO - 用
object-position: top可控制裁剪起点，避免关键内容被切掉 -
srcset中的w单位是图片源的**固有宽度**（如"photo-480w.jpg 480w"），不是显示宽度 -
sizes的值必须和该图片在 CSS 中的**实际显示宽度逻辑一致**，例如：sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw" - 如果父容器是
flex项且宽度由flex-basis决定，sizes就得对应写成类似(max-width: 768px) 50vw, 33vw，而不是笼统的100vw - 只写
srcset不配sizes，等于放弃响应式加载控制权 - 外层容器设
aspect-ratio: 9/16（典型竖屏比例），并给足够视口高度：.vertical-container { width: 100vw; height: 100vh; aspect-ratio: 9/16; } - 图片设
width: 100%; height: 100%; object-fit: contain;，此时图会等比缩放到刚好完整显示 - 注意：若容器高度受限（比如卡片高度只有
200px），contain会导致图片过小，这时应换用cover+object-position控制焦点区域 - 别用
background-size: 100% 100%，那是强制拉伸，必然失真
固定容器高度下让图片等比填满（object-fit）
object-fit 不是让图片“自适应”，而是控制它如何填进一个已有宽高的盒子。它只在容器明确设了 width 和 height（或 aspect-ratio）时才起作用。
响应式图片加载 + 显示分离：srcset + sizes 必须配对
max-width: 100% 解决“怎么画出来”，srcset+sizes 解决“加载哪一张”。不配 sizes，浏览器就按默认 100vw 选图，小屏也下大图。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
竖屏设备下图片完整可见（contain 场景）
当目标是“确保整张图在竖屏下完全可见”，object-fit: contain 是最直接解法，但它需要容器有足够高度空间，否则留白会过大。
最容易被忽略的是：所有这些方案都依赖父容器有“可计算的尺寸上下文”。没有 width、max-width、flex-basis 或 aspect-ratio 的容器，就是一张白纸，再好的 CSS 也无从下手。
