如何让覆盖在object-fit:contain图片上的CSS Grid保持比例缩放

问题根源在于：你用object-fit: contain时，图片是在v-img容器内按比例缩放，但Grid布局是基于v-img的容器尺寸计算的——当容器宽高比和图片不一致时，图片会在容器内留白，Grid的区域自然就和图片错位了。

下面是具体修复方案：

1. 调整HTML结构 #

把selectGrid从v-img内部移到同级，用父容器包裹两者，让Grid可以精准覆盖在图片上方：

<div class="image-container">
  <v-img src="../assets/images/character.png"
         class="character-img">
  </v-img>
  <div class="selectGrid">
    <div class="item head justify-center">
      <div></div>
    </div>
    <div class="item chest justify-center">
      <div></div>
    </div>
    <div class="item bottom justify-center">
      <div></div>
    </div>
  </div>
</div>

2. 核心CSS修改 #

关键是让父容器保持图片的原始宽高比（示例图片宽高为800x1600，比例为1/2），同时让Grid绝对定位覆盖在图片上：

/* 父容器：强制保持图片宽高比，限制最大高度 */
.image-container {
  position: relative;
  max-height: calc(100vh - 80px);
  aspect-ratio: 1/2; /* 替换成你图片的实际宽高比 */
  margin: 0 auto; /* 可选：让容器居中 */
  overflow: hidden;
}

/* 图片：铺满容器，保持比例 */
.character-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Grid容器：覆盖在图片上方，尺寸和父容器完全一致 */
.selectGrid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  /* 行列百分比基于图片原始比例，现在会跟着父容器同步缩放 */
  grid-template-columns: 1fr 1fr minmax(30px, 150px) 1fr 1fr;
  grid-template-rows: 15% 4% 20% 5% 42%;
  grid-template-areas:
    ". . head . ."
    ". . . . ."
    ". chest chest chest ."
    ". . . . ."
    "bottom bottom bottom bottom bottom";
}

.item {
  display: flex;
}

.item>div {
  width: 100%;
  height: 100%;
  border: 1px solid white;
}

.head { grid-area: head; }
.chest { grid-area: chest; }
.bottom { grid-area: bottom; }

3. 移除冗余的媒体查询 #

现在父容器会自动按图片比例缩放，Grid的行列百分比会跟着适配不同屏幕尺寸，原来媒体查询里的max-width限制可以直接删掉——Grid的区域会始终和图片对应。

如果你的图片宽高比不固定，可以用JS动态获取图片宽高后设置父容器的aspect-ratio：

const img = document.querySelector('.character-img');
img.onload = function() {
  const ratio = this.naturalWidth / this.naturalHeight;
  document.querySelector('.image-container').style.aspectRatio = ratio;
}

这样不管怎么调整容器尺寸，Grid的选择区域都会和object-fit:contain缩放后的图片完全对齐，不会出现错位问题。

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