如何在固定尺寸div的链接内适配图片，且仅图片区域可点击？

要实现固定尺寸容器内链接仅包裹图片区域，同时让未知尺寸的图片（横竖版均可）自适应容器显示，可以通过调整布局方式解决，Tailwind实现方案如下：

代码示例 #

<div class="mb-12 h-[200px] w-[280px] bg-pink-500 flex items-center justify-center">
  <a href="#">
    <img src="http://placekitten.com/200/300" alt="示例图片" class="max-h-full max-w-full object-contain" />
  </a>
</div>

关键调整说明 #

• 父容器添加flex items-center justify-center：通过Flex布局让图片在固定尺寸的容器内水平垂直居中，避免图片拉伸或偏移。
• 图片替换h-full w-full为max-h-full max-w-full：限制图片最大尺寸不超过容器，同时保持自身宽高比例，确保横竖版图片都能完整适配。
• 链接<a>不设置宽高：让链接完全由内部图片的实际尺寸撑开，点击区域仅覆盖图片本身，而非整个容器。

原方案问题原因 #

原方案中图片设置了h-full w-full，会强制图片占满容器宽高，同时链接<a>会被撑满整个容器空间，导致点击区域覆盖了整个粉色背景区域。

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