使用 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 可以为图片容器设定一个稳定的显示比例。

.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 精确控制图片渲染方式，就能彻底解决网格布局中的图片变形问题，简单有效。