object-fit本身不锁定长宽比，因为它只控制图片在已知尺寸容器内的缩放与裁剪方式，而非约束容器或图片原始比例；真正锁定比例需配合aspect-ratio或padding-bottom等容器尺寸控制策略。
为什么 object-fit 本身不锁定长宽比
object-fit 控制的是内容（如图片）在容器内的“裁剪/缩放行为”，不是约束容器或图片本身的宽高比。它默认不会改变图片原始尺寸比例，但也不会阻止你用 width/height 手动破坏比例——也就是说，object-fit 是“怎么塞进去”，不是“不让拉变形”。真正锁定比例得靠容器或图片自身的尺寸控制逻辑。
用 aspect-ratio 配合 object-fit 锁定容器比例
现代浏览器中，最直接的方式是给图片的父容器设置固定宽高比，再让图片自适应填充。这样即使图片原始比例不同，容器形状始终一致，object-fit 才能稳定生效。
常见做法：
- 给包裹
<img>的<div> 设置 <code>aspect-ratio: 16 / 9（或任意比值） -
<img>设为width: 100%; height: 100%; object-fit: cover; - 避免同时设
width和height在<img>上，否则会覆盖aspect-ratio效果
示例：
<div style="aspect-ratio: 4 / 3; width: 300px;"> <img src="photo.jpg" style="max-width:90%"> </div>
兼容旧浏览器：用 padding-bottom 模拟 aspect-ratio
IE 和部分老版本 Safari 不支持 aspect-ratio，此时需用“padding-bottom 百分比”技巧。它的原理是：padding 的百分比值基于容器宽度计算，可用来撑出固定比例高度。
关键点：
- 容器设
position: relative，子元素position: absolute覆盖全区域 - 用
padding-bottom: 75%实现 4:3（即 3 ÷ 4 = 0.75） - 图片仍用
object-fit: cover，且必须设top/left/right/bottom: 0或width/height: 100%
示例（4:3 容器）：
<div style="position: relative; width: 100%; padding-bottom: 75%;"> <img src="photo.jpg" style="max-width:90%"> </div>
object-fit 值选哪个？看内容优先级
cover 和 contain 最常用，但行为差异明显，选错会导致“以为锁了比例，实际切掉重要内容”：
-
object-fit: cover→ 等比缩放填满容器，**可能裁剪边缘**（适合封面图、头像） -
object-fit: contain→ 等比缩放至完全可见，**留白在容器内**（适合图表、证件照预览） -
object-fit: fill→ 强制拉伸填满，**必然失真**，除非明确要变形
注意：object-fit 对 <img> 生效的前提是它有明确的尺寸上下文（比如父容器宽高已知），否则可能无效。
真正容易被忽略的是：object-fit 不解决“图片加载前占位塌陷”问题。如果图片异步加载，容器没设 aspect-ratio 或 padding，页面会闪动。所以锁定比例不只是 CSS 属性选择，更是容器尺寸策略 + 加载占位的组合动作。
