object-fit: cover 变形主因是容器无明确宽高比，需用 aspect-ratio、padding 技巧或固定高度锁定容器比例，再配合 object-position 精调裁剪区域。
加了 object-fit: cover 还是变形，大概率不是属性写错了，而是容器没“框住”图片——object-fit 本身不定义尺寸，只管内容怎么填框；没框，它就直接不干活。
为什么 object-fit 在小屏下看起来没效果
最常见原因是：图片容器没有可计算的高度。比如只写了 width: 100%，但 height 是 auto 或未声明，浏览器就按图片原始高度撑开容器，object-fit 失去裁剪或缩放的基准。
- Flex 容器中子项未设
min-height或aspect-ratio，加载中或空内容时高度塌陷 -
float未清除，父容器高度为 0，图片实际渲染在流外 - 用了
max-width: 100%+height: auto（这是响应式图片写法），但它和cover冲突——前者让高度浮动，后者要固定框 - iOS Safari 13.3 及更早版本不支持
object-fit，需加-webkit-object-fit: cover
怎样给容器“锁住比例”，让 object-fit 生效
关键不是给 <img> 设尺寸，而是确保它所处的渲染空间有明确宽高比。现代写法优先用 aspect-ratio，兼容性要求高时 fallback 到 padding 技巧。
- 推荐（Chrome/Firefox/Safari 15.4+）：
img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } - 兼容写法（含 Safari 13.3）：父容器设
position: relative; padding-bottom: 56.25%;，img设position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; - 简单场景（卡片高度统一）：
img { width: 100%; height: 200px; object-fit: cover; }，注意别和max-width混用 - Flex/Grid 布局中，务必加
align-items: center（避免contain时留白全在底部）
cover 和 contain 到底该选哪个
这不是“好不好看”的选择，而是由内容语义决定的：要不要保证全部可见？
-
object-fit: cover：适合封面图、头像、轮播图——必须填满、允许裁剪。但默认object-position: center center可能切掉人脸，记得配object-position: center top或20% 30% -
object-fit: contain：适合证件照、产品主图、图标——必须完整显示，留白可接受。此时object-position影响很小，因为整张图都在框内 -
object-fit: fill：等同于不写object-fit，会拉伸变形，除非刻意做故障效果，否则一律避免 -
object-fit: scale-down：适合组件库里不确定图源尺寸的场景，自动在none和contain中选更小的那个
移动端真正容易被忽略的细节
很多人调通 object-fit 就以为万事大吉，但小屏下真正出问题的常是“画什么”，而不是“怎么画”。
-
<meta name="viewport" content="width=device-width, initial-scale=1">缺失或被 JS 覆盖，导致 CSS 像素错乱 - 高清屏加载了 2x 图但没配
srcset和sizes，带宽浪费 + 渲染延迟，间接加剧布局抖动 - 用
background-image替代<img>虽能绕过兼容问题，但丢失alt、懒加载loading="lazy"和 SEO 支持 - 在 Bootstrap 卡片里直接套用
card-img-top，它不提供高度约束，得额外加h-250类或自定义高度
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
