object-fit: cover 必须配合明确宽高或 aspect-ratio 的容器才生效，否则仅等比缩放；需搭配 width/height 100%、flex/grid 居中、object-position 调整裁剪焦点，并用 padding-bottom 兼容旧浏览器。
object-fit: cover 必须配合明确容器尺寸
只写 object-fit: cover 不会自动裁剪——浏览器根本不知道“满”是指多大。它需要一个有明确宽高参照的容器，否则图片仍按原始比例缩放，不裁也不居中。
常见错误是：
height 或 aspect-ratio，结果只是等比缩放，上下/左右大片留白。
- 推荐做法：用
aspect-ratio: 16/9（或你想要的比例）直接定义容器比例，现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）原生支持 - 必须让
class="w-100 h-100"或style="max-width:90%"，否则object-fit失效 - 别混用
max-width: 100%和固定height，这会强制拉伸，覆盖cover行为
vertical-align 和 margin: auto 在 img 上基本无效
display: inline-block，所以 margin: 0 auto 对它不起作用；就算改成 block，也只管水平，垂直方向完全没反应。而 vertical-align 是为行内上下文设计的，对块级布局或 flex 容器里的图片没意义。
真正稳的方案是让父容器接管居中逻辑：
- 父容器设
display: flex; justify-content: center; align-items: center; - 或者
display: grid; place-items: center;（注意：父容器得有可推导的高度，比如min-height: 100vh或height: 400px） - 绝对定位 +
transform: translate(-50%, -50%)也能用，但需父容器position: relative且高度可控
object-position 控制裁剪焦点，但只在 cover/contain 下生效
object-position 不是背景偏移，它是图片内容在 50% 30% 意味着从图片顶部往下量 30% 的位置作为垂直裁剪起点。
典型用法：
- 横屏封面图常用
object-position: center center - 竖屏人像若人脸偏上，改用
object-position: center top避免头顶被切 - 必须和
object-fit: cover同时存在才起作用；单独写object-position没效果 - 媒体查询里可动态切换：
@media (max-aspect-ratio: 1/1) { img { object-position: center top; } }
兼容老浏览器要用 padding-bottom 模拟 aspect-ratio
Safari 15.3 及更早、IE 全系不支持 aspect-ratio，这时唯一纯 CSS 可靠方案是利用 padding-bottom 的百分比基于父宽计算的特性。
关键点：
- 父容器设
position: relative; height: 0; padding-bottom: 56.25%;（16:9 = 9 ÷ 16） - 子
position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; - 千万别同时写
height和padding-bottom，否则高度冲突 - 移动端可用媒体查询改
padding-bottom值，比如小屏设为100%实现正方形
这个技巧容易被忽略的是：它依赖父容器宽度，如果父容器本身宽度不可控（比如嵌套在 flex 自适应项里），padding-bottom 就可能失准——这时候就得退到 JS 测量或接受降级表现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
