Vue.js 3中如何让router-link完全适配图片？

当前整个.gallery-item区域可点击，是因为img设置了height: 100%撑满容器高度，导致包裹它的<router-link>被拉伸至容器大小，连背景色区域也变成了可点击范围。以下是针对性的修改方案：

修改后的Vue组件代码 #

<template>
    <div class="gallery">
        <div class="gallery-item">
            <router-link to="/cat"><img src="../assets/cat.jpg" alt="cat"></router-link>
        </div>
    </div>
</template>

修改后的CSS样式代码 #

<style scoped>
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 20px;
  margin: 20px;
}

.gallery-item {
  background-color: aquamarine;
  max-height: 300px;
  /* 用flex布局让图片居中，同时限制链接的拉伸范围 */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px; /* 可选：给背景区域加内边距，让图片和容器边缘有间隔 */
}

/* 让router-link仅包裹图片实际尺寸 */
router-link {
  display: inline-block;
  text-decoration: none; /* 去掉链接默认下划线 */
}

img {
  width: 100%;
  height: auto; /* 让图片按原始比例显示，不强制占满容器高度 */
  max-height: 100%; /* 限制图片最大高度不超过容器 */
  /* 若需保持图片在容器内完整显示，可保留以下属性 */
  /* object-fit: contain; */
}
</style>

修改后，<router-link>只会包裹图片的实际渲染区域，.gallery-item的背景色部分不再具备可点击性，同时图片依然会在容器内居中显示，保持画廊的布局效果。

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