如何实现img标签适配容器且仅贴合图片无空白（不裁剪）？

核心是让<img>标签尺寸完全匹配图片自身比例，同时限制其最大宽高不超出容器可用空间，既满足不裁剪、保持比例的要求，又能消除空白区域，保证点击区域准确。

修改后的代码 #

HTML #

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

（移除了aspect-ratio="auto"，无需强制img的宽高比，让它跟随图片自身比例）

CSS #

.object-fit {
  max-width: 100%;
  max-height: 100%;
  display: block;
  /* 删掉原width:100%和height:100%，避免强制img占满容器导致空白 */
}

原理说明 #

• 移除强制宽高后，<img>会根据原始图片的宽高比自动计算自身尺寸，不会出现超出图片内容的空白区域。
• max-width和max-height确保图片不会超出容器的可用范围，容器的flex布局会让图片在内部居中显示。
• 无论图片本身比容器大还是小，都会在保持比例的前提下适配：小图以原尺寸展示，大图按比例缩小至刚好适配容器的宽/高，且始终不会裁剪图片。

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