应使用固定容器尺寸配合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的裁剪/缩放行为 - 若父容器是 flex/grid 项，记得确认其
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 很容易切掉重点。