object-fit: cover 是唯一能同时“充满父元素”和“保持原始比例”的方案，但前提是父容器必须有明确 width 和 height（或 aspect-ratio）；仅用 max-width: 100%; height: auto; 无法充满，因它只等比缩放、不裁剪，必留白。
object-fit: cover 是唯一能同时“充满父元素”和“保持原始比例”的 CSS 方案，但必须满足一个硬性前提：父容器得有明确的 width 和 height（或等效的 aspect-ratio）。只写 max-width: 100%; height: auto; 永远做不到“充满”，它只会等比缩小、留白。
为什么 max-width: 100%; height: auto; 不行
这组样式只保证图片不溢出、不拉伸，但它让图片“按需缩放”，不是“填满”。浏览器不会为了填满而裁剪——它优先保全内容完整。所以你看到的是居中+留白，不是充满。
- 父容器没设
height，height: auto就会按图片原始高渲染，根本谈不上“充满” - 写了
width: 100%却没配height，图片高度由原始宽高比决定，无法撑满容器高度 - 即使容器有高度，
height: auto仍强制使用原始比例计算高度，不会主动拉高或裁剪
object-fit: cover 必须配显式尺寸
object-fit 不是独立生效的属性，它只在容器具备可渲染的“框”时才起作用。这个“框”必须靠 width 和 height（或 aspect-ratio + 宽度/高度之一）定义出来。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 正确写法示例：
<div style="width: 300px; height: 200px;"> <img src="photo.jpg" style="max-width:90%" alt="HTML怎么让图片自适应充满父元素且保持原始比例" > </div>
- 现代写法（推荐）：
<div style="width: 100%; aspect-ratio: 4 / 3;"> <img src="photo.jpg" style="max-width:90%" alt="HTML怎么让图片自适应充满父元素且保持原始比例" > </div>
——aspect-ratio定义容器比例，width: 100%让它响应式伸缩 - 别在
object-fit容器里再写max-width: 100%，它和width: 100%冲突，可能引发渲染异常
Flex/Grid 容器里图片撑开怎么办
哪怕你写了 width: 100%; height: 100%; object-fit: cover;，在 display: flex 或 display: grid 的父容器里，图片仍可能按原始尺寸撑开布局——这不是图片的问题，是 flex/grid 子项默认的 min-width: auto 在作祟。
立即学习“前端免费学习笔记（深入）”；
- 解法不是改图片，而是改它的父项（即 flex/grid 容器里的直接子容器）：
min-width: 0 - 如果图片是 flex 直接子项，给它加
min-width: 0；如果是 grid 直接子项，同样加min-width: 0 - 避免用
flex-shrink: 1，对替换元素（如<img alt="HTML怎么让图片自适应充满父元素且保持原始比例" >）效果极不可靠 - 老版 iOS Safari 需加
-webkit-object-fit: cover前缀；IE 完全不支持，只能 fallback 到background-image（但会丢失alt和 SEO）
真正卡住人的从来不是 object-fit 本身，而是“忘了给容器画框”或“在 flex/grid 里没重置 min-width”。这两个点漏掉任何一个，cover 都只是摆设。
