object-fit不能直接用width/height控制缩放，因为width/height强行拉伸替换元素会破坏宽高比；object-fit专为替换元素设计，需配合显式宽高或aspect-ratio才生效：cover等比填满裁边，contain等比完整留白。
object-fit 为什么不能直接用 width/height 控制缩放
因为 width 和 height 是控制容器尺寸的，而图片本身是替换元素（replaced element），它有自己的固有宽高比。直接设 width: 100%; height: 100% 会强制拉伸，破坏比例——这不是“按比例缩放”，是变形。
object-fit 才是专为这类元素设计的缩放裁剪控制器，它不改容器大小，只决定内容怎么“塞进去”。必须配合显式设置的 width 和 height（或 aspect-ratio）才生效。
- 没设宽高 →
object-fit不起作用（浏览器不知道“容器”有多大） - 设了
width: 100%; height: auto→ 容器高度由内容撑开，object-fit失效（没固定高度可适配） - 推荐写法：
width: 200px; height: 150px;或width: 100%; aspect-ratio: 4/3;
cover 和 contain 的实际效果差异在哪
二者都保持原始宽高比，但策略相反：
-
object-fit: cover：优先填满容器，宁可裁边。适合 Banner、头像、卡片图——视觉冲击强，但可能切掉重要内容（比如人脸边缘） -
object-fit: contain：优先完整显示，宁可留白。适合产品图、文档截图、图标——信息无损，但需处理上下/左右空白（可用background-color或父容器padding弥补）
错误认知：“cover 就是 background-size: cover”。其实 background-size 作用于背景层，object-fit 作用于内容层——语义不同，DOM 可访问性、SEO、打印样式都受影响。
IE 和旧版 Safari 怎么兼容 object-fit
原生 object-fit 在 IE 完全不支持，iOS Safari cover/contain。硬加 polyfill（如 object-fit-images）会引入 JS 依赖和额外请求，且对 video 支持弱。
- 最简降级方案：用
background-image替代<img>，配合background-size: cover+background-position: center。缺点：失去alt文本、无法右键保存、响应式srcset失效 - 渐进增强写法：
img { width: 100%; height: 100%; object-fit: cover; } img::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: inherit; background-size: cover; background-position: center; z-index: -1; }——仅作参考，实际慎用（伪元素无法继承background-image） - 真实项目建议：明确支持范围。若需兼容 IE，直接放弃
object-fit，改用容器overflow: hidden+ 图片固定宽高 +transform: scale()手动模拟（但注意transform-origin要设为center）
为什么设置了 object-fit 还是没变化
最常见原因是：容器没有形成**块级格式化上下文（BFC）** 或被其他样式干扰。尤其在 Flex/Grid 容器中，子项默认 align-items: stretch，会强行拉高 <img>，覆盖 object-fit 效果。
- 检查父容器是否用了
display: flex或display: grid，如果是，给<img>加align-self: flex-start或justify-self: start - 确认图片没被其他规则重置，比如某处写了
img { max-width: 100%; height: auto; }，它会覆盖你设的height -
object-fit对svg元素无效（SVG 不是替换元素），对<canvas></canvas>也无效，仅适用于<img>、<video></video>、<iframe></iframe>（部分浏览器）
真正容易被忽略的点：很多开发者以为设了 object-fit 就万事大吉，却忘了它必须和确定的容器尺寸绑定——没有宽高，就没有“适配”的参照物。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
