object-fit必须配合明确宽高才生效，否则无效；cover等比缩放并裁剪填满容器，contain等比缩放完整显示留白，二者均需设width/height且仅作用于替换元素。
object-fit 本身不实现“等比例缩放”，它只控制图片在已有尺寸的容器内如何显示。如果你没给 <img> 设宽高，object-fit 就是摆设。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
object-fit 必须配合明确的宽高才生效
- 浏览器需要一个“框”才能决定怎么填——
object-fit: cover不会自动把图片缩到 300×200，它只在你已经声明了 width 和 height 的前提下，按比例裁剪填满 - 常见错误：只写
style="object-fit: cover;"，但没设width和height，结果图片还是原始尺寸、溢出或撑开布局 - 正确做法：
- 容器（比如父
<div>）设固定/响应式尺寸 +overflow: hidden -
<img>写width: 100%; height: 100%; display: block;，再加object-fit
- 容器（比如父
object-fit: contain 和 object-fit: cover 的实际差异
-
object-fit: contain：等比缩放后完整显示整张图，四周可能留白；适合头像、图标、产品图等必须全貌可见的场景 -
object-fit: cover：等比缩放后填满整个容器，多余部分被裁剪；适合 banner、卡片封面、海报类视觉优先内容 - 两者都要求图片原始宽高比 ≠ 容器宽高比才有明显效果；如果一致，看不出区别
- 裁剪起点可调：
object-position: center top把焦点移到顶部中央，object-position: 20% 30%往左上偏移
Flex 容器中 object-fit 失效的典型原因
- Flex 项默认有
min-width: auto，会阻止<img>收缩，导致width: 100%不生效，进而让object-fit失效 - 解决方法：给图片或其父 flex 项加
min-width: 0 - 同理，Grid 项也可能需要
min-width: 0或min-height: 0 - 如果用了
aspect-ratio（如aspect-ratio: 4 / 3），仍需配width: 100%和object-fit，否则比例只是容器的，不是图片的
IE 兼容性问题不能靠“忽略”解决
-
object-fit在 IE 中完全不支持，连降级样式都不触发 - 若项目需兼容 IE11，别试图用
@supports包裹——IE 直接跳过整个规则块 - 可行替代方案只有两个：
- 改用
background-image+background-size: cover，但牺牲语义、SEO 和可访问性 - 用 JS 检测支持性，动态插入
img或 fallback wrapper，成本高但可控
- 改用
- 现代项目若已放弃 IE，就别在 CSS 里塞一堆冗余 fallback 规则，徒增维护负担
object-fit 是个精准工具，不是万能缩放开关。它的作用边界非常清楚：有框，才填；无框，无效。很多人卡住，不是不会写，而是没意识到“框”得自己亲手画。
