应使用固定容器尺寸配合object-fit属性：设img为width:100%;height:100%;object-fit:cover/contain/fill，其中cover等比填充裁剪、contain等比缩放留白、fill强制拉伸；注意兼容性及object-position微调。
图片尺寸不一致导致布局错乱怎么办
直接设 width 和 height 会让图片拉伸变形，尤其当原始宽高比差异大时。真正可控又不破坏构图的方式是组合使用固定容器尺寸 + object-fit。
用 width/height 固定容器，不是固定图片本身
给 三者行为差异明显，选错会立刻暴露为留白、裁切过度或严重变形： 立即学习“前端免费学习笔记（深入）”； 最常被忽略的是 img 上设尺寸，但关键是要把图片当作「内容」来装进这个框里，而不是强行缩放它。
img 设置 width: 100%; height: 100%; display: block;，再配合 object-fit
width 不设 height，否则无法触发 object-fit 的裁剪/缩放行为min-width/min-height 没有干扰（比如默认的 min-width: auto 可能撑开容器）
object-fit 的取值怎么选：cover、contain 还是 fill
object-fit: cover —— 等比缩放填满容器，超出部分裁剪；适合头图、卡片图，但要注意关键内容别被裁掉object-fit: contain —— 等比缩放至完全可见，留白不可避免；适合产品图、图标类需完整展示的场景object-fit: fill —— 强制拉伸填满，宽高比丢失；仅用于背景图或明确接受变形的场合img {
width: 200px;
height: 150px;
object-fit: cover;
object-position: center; /* 可选：微调裁剪基准点 */
}兼容性与 fallback 注意点
object-fit 在 IE 完全不支持，Android 4.4 以下也受限。如果项目必须兼容老环境：
@supports (object-fit: cover) 包裹现代写法，再写一层传统 background-image 方案img 的 srcset 或 sizes 来“修复”尺寸问题——它们解决的是响应式分辨率，不是布局对齐object-fit 是前端兜底手段，不是替代方案object-position：默认居中，但人像常需上移一点露出脸部，商品图可能需要下移突出主体——这点不调，cover 很容易切掉重点。
