使用aspect-ratio属性时如何避免图片拉伸？

你用aspect-ratio: 1/1强制图片为正方形容器，但默认的object-fit: fill会让图片拉伸填满容器，导致变形。只需给图片添加object-fit属性就能解决：

方案一：裁剪式适配（推荐商品图使用） #

给.product img添加object-fit: cover，图片会保持原有比例缩放，完全覆盖正方形容器，超出部分自动裁剪，不会变形：

.product {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-basis: 22%;
}

.product img {
  aspect-ratio: 1 / 1;
  width: 100%;
  margin: 2rem;
  object-fit: cover;
  object-position: center; /* 可选，控制图片居中对齐，可根据需求调整为top、bottom等 */
}

方案二：完整显示式适配 #

如果不想裁剪图片，可使用object-fit: contain，图片会完整显示并保持比例，容器空白处可添加背景色统一视觉：

.product {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-basis: 22%;
}

.product img {
  aspect-ratio: 1 / 1;
  width: 100%;
  margin: 2rem;
  object-fit: contain;
  background-color: #f5f5f5; /* 可选，添加背景色填充空白区域 */
}

内容的提问来源于stack exchange，提问作者neycklyz