object-fit: cover 生效需容器有明确宽高，否则塌陷失效；应使用 aspect-ratio 或 padding-top 占位，配合 overflow: hidden 和 object-position 精准控制裁切焦点。
object-fit: cover 是基础，但必须配明确宽高容器
直接给 img 写 object-fit: cover 却没效果？大概率是容器塌陷了。它不认 width: 100% + 无高度的组合，会退化成原始尺寸拉伸或留白。
正确做法是让容器自己“撑开”：用 aspect-ratio 或 padding-top 百分比占位，再把图片塞进去填满。
-
aspect-ratio: 750 / 1334（对应常见设计稿比例），配合width: 100%; height: 100%的img - 老浏览器兼容写法：
height: 0; padding-bottom: 177.87%（1334 ÷ 750 ≈ 177.87） - 别忘了加
overflow: hidden，否则裁切失效
裁切焦点偏移要用 object-position，不是 background-position
海报里人脸被切掉一半？object-fit: cover 默认以 center center 为锚点，而长图的视觉重心往往在上半部分。这时候改 object-position 才对症。
-
object-position: 50% 15%表示水平居中、垂直向上偏移（0% 是顶部，100% 是底部） - 避免只写
object-position: top——它等价于top center，水平还是居中，可能把关键内容挤出画面 - 值支持像素、百分比、关键词，但不能用
left 20px这种混合写法
按屏幕高度而非宽度设媒体查询断点
海报在 iPhone SE 和 Pixel 7 上显示差异大，不是因为宽度差 37px，而是可用高度不同导致裁切量突变。用 max-width 断点容易误判。
- 优先用
@media (max-height: 600px)或@media (min-height: 700px)控制裁切行为 - 更精准的做法是监听容器实际高度：
@media (max-height: calc(100vh - 120px))（扣掉 header/footer 高度） - 每个断点下单独调
object-position，比如小屏设50% 10%，大屏回退到50% 30%
慎用 transform: scale 做整体缩放
有人想用 transform: scale(0.7) 把整张海报压进小屏，结果文字模糊、点击错位、fixed 元素飘走——这不是 bug，是 scale 的固有限制。
-
scale不改变 layout box，事件坐标、滚动计算、fixed 定位都还按原始尺寸算 - 真正适配应靠
viewport+rem动态根字体，让所有尺寸随屏幕等比变化 - 如果非要用
scale，仅限局部动效，且必须加transform-origin: center和overflow: hidden父容器
最常被忽略的一点：裁切是否生效，取决于容器是否有确定的渲染尺寸。任何依赖 JavaScript 动态插入或异步加载的容器，都要确保 CSS 尺寸声明在 DOM 就绪前已就位，否则 object-fit 会错过首次布局计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
