scale-down并非万能解，仅在图片大于容器时缩放，否则原样显示；需明确宽高约束才生效，适用头像预览等弱约束场景，cover或contain更可控。
object-fit: scale-down 不是“居中且不拉伸”的万能解，它只在特定条件下生效——当图片原始尺寸大于容器时才缩放，否则原样显示。真要稳定居中又不变形，cover 或 contain 才是更可控的选择。
为什么 scale-down 经常没效果？
这个值的行为是“取 none 和 contain 中尺寸更小的那个”，但前提是：图片必须有明确的容器约束（width/height 或 aspect-ratio），且浏览器得知道“谁大谁小”。常见失效场景：
- 只写了
max-width: 100%，没设height或aspect-ratio→ 容器高度塌陷，scale-down无从比较 - 图片本身比容器小（比如 200×150 的图放进 300×200 的盒子）→ 直接走
none分支，不缩放、不居中、可能偏左上 - 父容器用了
flex但没设align-items: center→ 即使缩放生效，图片仍可能贴顶或靠左
scale-down 真正适用的场景
它适合那些“尺寸不可控但又不能强制裁剪”的弱约束场景，比如用户头像上传预览、评论区小图标、卡片内嵌的辅助图。此时你希望：大的图自动缩小适配，小的图保持原样不糊，也不强行拉伸。示例写法：
img {
width: 80px;
height: 80px;
object-fit: scale-down;
object-position: center;
}
注意两点：
立即学习“前端免费学习笔记（深入）”；
-
object-position: center必须显式加，否则none分支下图片默认按 content-box 左上角对齐 - 移动端 Safari 12.2+ 才完整支持
scale-down，老版本会回退到fill（即拉伸）
比 scale-down 更稳的替代方案
多数移动端图片适配，其实不需要“大小自适应”逻辑，而是要确定性行为：
- 要填满容器、允许裁剪 → 用
object-fit: cover+object-position: center（最常用） - 要完整显示、接受留白 → 用
object-fit: contain+background-color填充空白（避免白底透出） - 要兼容 iOS 12 以下 → 加
-webkit-object-fit: cover前缀，同时确保容器有overflow: hidden作视觉兜底
真正容易被忽略的是：无论选哪个值，width 和 height（或 aspect-ratio）缺一不可——没这俩，object-fit 就是废属性。
