object-fit: cover 配合 object-position 才能真正按比例裁剪，仅用 cover 默认居中裁剪；object-position 生效需 img 有明确宽高或父容器有确定高度，且仅对 cover 或 none 生效。
object-fit: cover 配合 object-position 才能真正按比例裁剪，只写 object-fit: cover 是默认居中切，不是“按需裁”。
为什么 object-position 设了却没反应
常见现象：写了 object-position: 0% 0%，图片左上角还是没露出来；或者改了值完全没变化。
- 最常被忽略的条件：
<img>必须有明确宽高（width和height同时存在），或父容器有确定高度（如height: 300px或aspect-ratio: 4/3） -
object-position只对object-fit: cover或object-fit: none生效；在contain或fill下它只影响定位，不触发裁剪逻辑 - 如果父容器用
max-width限制宽度但没设height或aspect-ratio，浏览器无法推导出“裁剪框”的边界，object-position就会静默失效
object-position 的百分比怎么算才准
它的取值逻辑和 background-position 一致，但容易误读：0% 不是“图片左上角贴容器左上角”，而是“图片左上角对齐容器左上角”——前提是图片已按 cover 缩放完成。
-
0% 0%→ 图片缩放后，其左上角对齐容器左上角（常用于保留 logo 或水印区域） -
100% 100%→ 图片缩放后，其右下角对齐容器右下角 - 若容器是
400px × 300px（4:3），而图片原始尺寸是1200×800（3:2），实际可视区域已被拉伸计算过，此时20% 30%的偏移量 ≠ 像素级精准定位，需按比例换算或用 JS 动态校准
兼容性差时怎么 fallback 到 padding-bottom 方案
当目标环境要支持 Safari ≤15.4 或 Firefox ≤89，aspect-ratio 不可用，就得用传统 padding 技巧。
- 不要在同一个容器上既写
height又写padding-bottom，否则高度冲突 - 推荐结构：
<div class="img-container"><img></div>，给容器设position: relative; height: 0; padding-bottom: 56.25%;（对应 16:9），再让<img>绝对定位填满 - 记得加
object-fit: cover和object-position到<img>上，否则 padding 只建了“空框”，内容还是默认拉伸
用 background-image 替代 <img> 真的更可控吗
是的，但代价是放弃语义化和懒加载能力。
-
background-size: cover+background-position行为更可预测，尤其在动态宽高场景下 - 它天然规避了
<img>的尺寸依赖问题：不需要显式设宽高，也不怕父容器高度未定 - 但
<img>支持loading="lazy"、decoding="async"、srcset响应式源，这些在 background 中全部丢失 - 如果业务强依赖 SEO 或无障碍访问（如 screen reader 读 alt 文本），不能用 background 替代
<img>
真正难的不是写对一行 object-fit: cover，而是搞清「图片原始比例」「容器渲染比例」「缩放后内容盒坐标系」三者之间的映射关系——多数错位都卡在这一步，而不是语法写错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
