object-fit能治图片变形是因为它尊重图片固有宽高比，只做等比缩放或裁剪；而width/height硬调会强制拉伸破坏比例。必须配合显式容器尺寸（如width+height或aspect-ratio）才生效，否则无效；cover适合填满裁边，contain适合完整显示留白。
object-fit 为什么能治图片变形，而不是靠 width/height 硬调？
因为 width 和 height 直接命令浏览器“把这张图拉成这个尺寸”，不管比例；而 object-fit 是告诉浏览器“这张图怎么放进你已经画好的框里”，它尊重图片固有宽高比，只做缩放或裁剪，不扭曲像素。
用户上传的图片尺寸千差万别（4:3、16:9、1:1、甚至竖版 9:16），硬设 width: 100%; height: 200px; 必然导致五官错位、文字压扁。用 object-fit 后，同一张 CSS 规则就能安全适配所有比例的图。
为什么只写 object-fit: cover 却没反应？
常见现象：加了 object-fit: cover;，图片还是原样拉伸——根本原因是容器没有可测量的尺寸上下文。
-
img自身没设width/height，且父容器高度是auto（比如纯靠内容撑开） - 用了 Bootstrap 的
img-fluid类，它带height: auto，反而破坏cover所需的固定渲染空间 - Flex/Grid 容器中子项未显式设高，也未设
align-items: stretch或min-height
必须让浏览器知道“框有多大”，object-fit 才能算出缩放比例和裁剪边界。
cover 和 contain 到底该选哪个？看语义，不是看好看
选错值会导致关键信息丢失或体验断裂，这不是风格偏好，而是业务逻辑判断：
-
object-fit: cover：适合封面图、头像、卡片主图——要求填满无留白，允许裁边。但必须配object-position（如object-position: top）防止人脸被切 -
object-fit: contain：适合证件照、产品细节图、UI 图标——要求全部可见，留白可接受。此时object-position影响小，因整图都在可视区内 -
object-fit: fill：等同于不用object-fit，强制失真，除非刻意设计怪诞效果，否则一律避免
如何可靠锁定容器尺寸？现代写法优先用 aspect-ratio
过去靠 padding-bottom 百分比 + position: absolute 太绕，现在更稳的方式是直接约束 img 自身：
- 推荐（Chrome/Firefox/Safari 15.4+）：
img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }—— 不依赖父容器，自身维持比例 - 兼容写法（含 Safari 13.3–15.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; }
无论哪种，记得加 overflow: hidden 在父容器上——尤其用 cover 时，裁掉的部分得真正藏住，不然可能溢出破坏布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
