object-fit: cover需配合明确宽高的容器和overflow: hidden父容器才生效，因overflow:hidden对img自身无效；仅设width/height会拉伸变形，非真正裁剪。
用 object-fit: cover 配合有明确尺寸的容器，是当前最可靠、语义正确且支持可访问性的自动裁切方案。
为什么 overflow: hidden 单独用在 img 上通常无效
常见错误是给 img 直接加 overflow: hidden，但该属性对替换元素（如 img）默认不生效——它只作用于块级容器的溢出内容。而 img 本身没有“内部内容”可裁，只是个原子单元。
- 必须把
img包进一个带overflow: hidden的父容器中，再约束其宽高 - 但仅靠容器裁剪无法保证图片等比缩放，容易出现拉伸或留白
- 更糟的是：若没设
height，img高度塌陷，裁剪区域为 0
object-fit: cover 必须搭配固定尺寸容器才生效
这个属性不会自己“猜”容器该多大；它只决定图片如何填满已有空间。如果容器宽高未明确（比如只有 width: 100% + height: auto），object-fit 就无从下手。
- 容器需设具体
width和height（可用vh、rem、aspect-ratio或媒体查询下的值） -
img本身设width: 100%; height: 100%，再加object-fit: cover - 显式写
object-position: center更稳妥，避免某些旧浏览器默认行为偏差 - Safari 15.4+ 才稳定支持
aspect-ratio，老版本得用padding-top百分比 hack
响应式裁切焦点切换：用 object-position + 媒体查询
单纯 cover 只能保证填满，不能控制“裁哪部分”。要让小屏时保留人脸、大屏时展示全身，得动态调锚点。
- 横屏常用
object-position: center center，竖屏可改center top防头顶被切 - 优先用
@media (min-aspect-ratio: 16/9)这类条件，比max-width更精准匹配屏幕比例 - 别在
img上同时写max-width: 100%和height: 100%——两者冲突，后者会被忽略 - 若用
background-image替代，虽支持background-position精控，但牺牲alt、srcset和打印样式
真正难的不是写对那几行 CSS，而是想清楚：这张图是内容还是装饰？是否需要被屏幕阅读器读出？是否要在打印页里出现？这些决策会直接决定你该选 img + object-fit，还是退回到 background-image 路线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
