使用 aspect-ratio 固定容器宽高比，结合 object-fit 控制图片填充方式，可解决CSS网格布局中图片拉伸变形问题。1. 通过 aspect-ratio: 16 / 9 设置容器比例，确保高度随宽度自适应；2. 使用 object-fit: cover（裁剪填满）或 contain（完整显示）保持图片比例；3. 配合 width: 100% 和 height: 100% 使图片正确渲染在网格项内；4. 在响应式 grid-container 中应用 minmax(250px, 1fr) 实现自适应列布局。最终实现图片在不同尺寸下均保持美观、不失真。
在使用CSS网格布局时，图片容易因为容器尺寸限制而拉伸变形，导致比例失真。这个问题可以通过结合 object-fit 和 aspect-ratio 属性来有效解决，让图片在网格中保持原始宽高比的同时，完美填充指定区域。
使用 aspect-ratio 固定容器比例
图片失真的根源之一是父容器没有固定宽高比，导致图片被强行拉伸以适应不规则空间。通过 aspect-ratio 可以为图片容器设定一个稳定的显示比例。
例如，想让所有图片项保持 16:9 的比例：.grid-item {
aspect-ratio: 16 / 9;
}
这样即使容器宽度变化，高度也会按比例自动调整，为图片提供一致的展示空间。
立即学习“前端免费学习笔记（深入）”；
使用 object-fit 控制图片填充方式
设置了容器比例后，还需控制图片如何“放入”该容器。直接设置 width: 100% 和 height: 100% 会拉伸图片，这时应使用 object-fit 来保持比例。
常用值包括：
- object-fit: cover：图片缩放填满容器，保持比例，超出部分被裁剪（适合背景图或焦点构图）
- object-fit: contain：完整显示图片，保持比例，可能留白（适合图标或需要全貌展示的图）
- object-fit: scale-down：类似 contain，但不会放大图片，防止模糊
配合使用：
img {
width: 100%;
height: 100%;
object-fit: cover;
}
结合网格布局的实际应用
在一个 CSS Grid 布局中，可以这样结构化处理：
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
}
.grid-item {
aspect-ratio: 16 / 9;
background: #f0f0f0;
}
.grid-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
这样无论图片原始尺寸如何，都能在响应式网格中统一、美观地展示。
基本上就这些。用 aspect-ratio 锁定容器形状，用 object-fit 精确控制图片渲染方式，就能彻底解决网格布局中的图片变形问题，简单有效。
