扩大<img>但不要太多

Question

我有一个显示图像的网页。 我希望图像扩展到其容器（减去一些边距和填充），同时保持其纵横比，但 img 标签也不要大于图像。

这是一个例子：

<div class="h-full w-full rounded-md border p-4 flex justify-center items-center">
    <img class="object-fit" :src="image" aspect-ratio="auto">
</div>

以此为风格：

.object-fit {
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
  height:100%;
  width:100%;
  display:block;
  background-color: red;
}

仅供参考：红色背景颜色只是为了显示 img 标签的大小

给我这个结果：

我想要相同的结果，但没有红色背景，因为我需要在图像上点击的确切位置。

所以我需要 img 标签尽可能大，但仍然勾勒出图像的轮廓，没有空格。 这无需裁剪图像（对象适合：封面，对我不起作用） 你有解决办法吗？