如何修复HTML/CSS/JS开发的记忆卡片游戏中的图片拉伸问题

修复方案 #

图片拉伸的核心原因是img标签默认的填充模式会强制适配容器尺寸，和你图片原始比例不匹配就会变形，按以下步骤调整即可：

1. 给卡片内的图片添加object-fit相关CSS规则，不用修改现有结构也不用提前裁图：

/* 适配卡片内的所有图片，包含问号背面和正面卡片图 */
.memory-card img {
  width: 100%;
  height: 100%;
  /* 完全填充卡片，超出部分按中心裁剪，不会拉伸 */
  object-fit: cover;
  /* 裁剪时优先保留图片中心内容 */
  object-position: center;
}

如果你不需要图片填充满整个卡片，想完整显示图片内容，把object-fit: cover改成object-fit: contain即可，图片会等比缩放适配卡片，多余的空白会自动留出来，你可以给.memory-card img加个背景色填充空白区域。
2. 如果不想用CSS适配，也可以提前把所有卡片图、问号图都裁剪成和卡片一致的宽高比即可：你当前卡片的宽高比约为3:4，所有图都按这个比例裁剪就不会出现拉伸问题。

可选优化（不影响拉伸问题） #

你当前.memory-card的margin设置为1px，左右总边距只有2px，但宽度计算时减了10px，会导致卡片之间的间隙偏大，你可以根据自己想要的间隙调整calc里的数值即可。

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