img响应式底线是max-width: 100%与height: auto必须共存，缺一导致模糊或高度为0；Flex容器中需加min-width: 0防撑宽；object-fit需配合固定容器尺寸才生效。
img加max-width: 100%和height: auto是底线组合
这两条规则必须同时出现，缺一不可。只写max-width: 100%，浏览器会强行拉宽图片导致模糊；漏掉height: auto，IE9–11 可能渲染成高度为 0，Safari 在 Flex 容器里也可能算错高度。
常见错误现象：
- 图片在窄屏下横向滚动——父容器没设宽度约束，
max-width: 100%失去参照 - 图片底部多出空白——
img默认是 inline 元素，建议加display: block - 小图在大屏上被放大变糊——父容器宽度是
100%但没设max-width上限，小图被撑开
Flex容器里图片不收缩？加min-width: 0
在display: flex父容器中，img默认带min-width: auto，它会“扛着原始尺寸”拒绝缩小，导致容器被撑宽、换行错乱或响应式断点失效。
解决方法很简单：
- 给
img加min-width: 0，覆盖默认行为 - 别依赖
flex-shrink: 1，对替换元素效果不稳定 - 确保父容器没写
white-space: nowrap或overflow: hidden干扰流式计算
要裁剪又保比例？用object-fit，但得配固定容器
object-fit不是让图片“自适应”，而是让它在**已有尺寸的容器内**按规则填充。它本身不控制容器大小，所以单独写object-fit: cover没用。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
必须满足：
- 容器有明确宽高，比如
width: 300px; height: 200px;，或用aspect-ratio: 4/3 - 图片自身设
width: 100%; height: 100%（不能留height: auto） - 老版 iOS Safari 需补
-webkit-object-fit，IE 完全不支持，fallback 只能切 background-image
父容器尺寸逻辑比图片样式更重要
写完max-width: 100%发现没反应，80% 是父容器的问题：
- 空
div或只写了display: flex没设width/min-width→ 宽度参照丢失 - 父容器用了
padding或border但没加box-sizing: border-box→ 实际宽度超限 - 图片带了
width="600"这类内联属性 → 直接覆盖 CSS 的height: auto
真正容易被忽略的是：你调的是图片，但起效靠的是三层宽度链——视口 → 父容器 → 子容器 → img。其中任何一环断掉，max-width: 100%就只是句注释。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
