仅设 max-width: 100% 的图片不会撑满容器，因 height 默认 auto 保持宽高比；需配合 object-fit（如 cover/contain）及明确容器尺寸才能实现填充或等比缩放。
max-width: 100% 类为什么不能单独撑满容器
只加 max-width: 100% 的图片，默认仍保持原始宽高比，且 height 是 auto。它能防止溢出，但不会主动拉伸或裁剪——比如一张窄高图放进宽矮容器，结果是顶部对齐、上下留白，而非填满。
常见错误写法：
.img-fit { max-width: 100%; }这仅限制宽度上限，不控制高度行为，也不影响内容渲染模式。
- 必须配合
height: 100%或固定高才能参与尺寸约束 - 但仅设
height: 100%又会破坏宽高比，导致拉伸变形 - 真正起作用的是
object-fit，它定义图片如何适应其盒模型
object-fit 的四个关键取值区别
object-fit 是图片（）的专用属性，不是通用 CSS 尺寸工具。它不改变盒子大小，只决定内容怎么“塞进去”。
-
fill：强行拉伸填满，忽略原始比例 → 常见于海报图，但人像易畸变 -
contain：等比缩放，完整显示全部内容 → 必有留白，适合头像、图标容器 -
cover：等比缩放并裁剪，填满容器 → 最常用，类似背景图的background-size: cover -
scale-down：取none和contain中更小的渲染效果 → 少用，主要用于响应式 fallback
注意：object-fit 对
立即学习“前端免费学习笔记（深入）”；
组合使用 max-width 和 object-fit 的典型类写法
工具类本质是预设组合，不是单属性封装。以下是最实用的两个场景：
- 响应式等比缩略图（保留全部内容）：
.img-contain { max-width: 100%; height: auto; object-fit: contain; }需确保父容器有明确宽高，否则height: auto仍由原始图决定 - 封面图裁剪填充（无留白）：
.img-cover { width: 100%; height: 200px; object-fit: cover; }width: 100%配合固定高，再用cover裁剪居中；若需响应式高度，改用aspect-ratio或 padding-top hack
别漏掉 display: block —— 默认
兼容性和容易被忽略的坑
object-fit 在 IE 完全不支持，Android 4.4 以下也缺失。如果项目需兼容老环境，得用 JS 模拟或降级为 background-image。
- 父容器必须有明确尺寸（宽/高非
auto），否则object-fit无参照系 -
object-position可配合cover微调裁剪区域，默认是50% 50%（居中），想突出脸部可设object-position: center top - SSR 或静态生成时，服务端无法执行
object-fit计算，所有尺寸逻辑必须纯 CSS 驱动，避免依赖 JS 测量
最常被跳过的一步：给 height 或 aspect-ratio 防止布局偏移（layout shift）。没有尺寸占位的图片加载时会重排页面。
