必须为容器设置明确宽高，object-fit才生效；常见失效原因包括父容器高度塌陷、flex子项被压缩、grid项无基准尺寸及响应式中height:auto导致无缩放依据。
直接给 img 设 width: 100%; height: 100% 就会失真，这不是图片问题，是浏览器默认拉伸行为——必须用 object-fit 显式声明缩放逻辑，且容器必须有明确宽高。
为什么 object-fit 单独写没效果
常见错误：只加 object-fit: cover，但没设容器宽高。它只对“有渲染尺寸”的替换元素生效，img 在浮动、flex 或 grid 中若父容器高度塌陷或未约束尺寸，object-fit 彻底失效。
- 浮动布局中，必须清除浮动或给父容器设
height/min-height - Flex 容器里，子项默认
flex-shrink: 1，会压缩图片——得加flex: 0 0 auto - Grid 项中，若没设
aspect-ratio或显式height，object-fit无基准可依 - 响应式场景下，
width: 100%+height: auto时，object-fit不触发——因为高度不是固定值
object-fit 各值的实际表现差异
不同值对应完全不同的裁剪/缩放逻辑，选错会导致关键内容被切掉或留白过多：
-
cover：等比放大至填满容器，溢出裁剪——适合封面图，但需配合object-position: center防止人脸偏移 -
contain：等比缩小至完整可见，留白填充——适合产品图、图标，但容器背景色要和留白一致，否则难看 -
scale-down：只缩小不放大，none和contain中取更小的——适合不确定原始图大小的列表页，防模糊 -
fill（默认）：强制拉伸，破坏比例——除非你真想让图变形，否则永远别用
移动端轮播图/卡片图失真的典型修复组合
在视口变化频繁的场景下，单靠 object-fit 不够，得和容器约束联动：
- 容器设
aspect-ratio: 16 / 9（现代浏览器），或退化为padding-top: 56.25%+position: relative的传统方案 - 图片写
width: 100%; height: 100%; object-fit: cover; position: absolute;，再用top: 0; left: 0;锚定 - 避免用
device-width这种非法值；改用100vw控制轮播宽度，但注意滚动条宽度干扰（可加overflow-x: hidden） - 如果必须支持 IE，放弃
object-fit，改用background-image+background-size: cover，并确保background-repeat: no-repeat
真正麻烦的从来不是写哪行 CSS，而是得判断：这张图要不要语义化？是否允许降级为背景图？容器尺寸会不会随 JS 动态变化？这些决策点比属性名本身更影响最终是否失真。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
