object-fit: cover 是解决 banner 图片拉伸变形的有效方法，需配合父容器明确宽高、使用 标签、设置 object-position 微调裁剪焦点，并确保 viewport 元标签正确。
用 object-fit: cover 是解决 banner 图片在不同设备上拉伸变形、比例不一致的常用且有效方法，但关键在于正确搭配容器设置，否则可能失效或出现裁剪异常。
确保父容器有明确宽高约束
banner 容器（比如 立即学习“前端免费学习笔记（深入）”； 即使样式正确，若页面缺少 viewport 元标签，iOS/Android 浏览器可能强制缩放，导致 banner 显示异常。 基本上就这些。核心是：容器定高 + img 标签 + object-fit: cover + object-position 微调 + 正确 viewport。不复杂但容易忽略其中一环。object-fit: cover 无法按预期裁切填充。常见错误是只设宽度（如 width: 100%），高度依赖图片自身，导致响应式时比例飘移。
height: 40vh 或 aspect-ratio: 16/9（现代浏览器支持）padding-top 响应式占位（如 padding-top: 56.25% 对应 16:9）height: auto 或未设高度的弹性容器直接套用 object-fit
图片需作为
标签使用（非 background-image）
object-fit 只对替换元素（如 ）生效，不能用于 CSS 背景图。若当前用 background-image 实现 banner，需改用语义化
.banner img { width: 100%; height: 100%; object-fit: cover; }
background-size: cover 替代，但失去 img 的语义与 SEO 优势配合媒体查询微调裁剪焦点（可选）
cover 会居中裁剪，但重要内容（如人脸、Logo）可能被切掉。可通过 object-position 调整焦点，再结合媒体查询适配不同断点。
object-position: center center
object-position: left center
@media (max-width: 768px) { .banner img { object-position: top; } }
注意移动端缩放与视口设置
中加入：
user-scalable=no，影响可访问性
