Tailwind CSS问题：包裹图片的div未贴合图片宽度反而拉伸？

问题出在图片未根据父容器的高度限制自动缩放宽度，导致外层黄色div沿用了图片的原始宽度。通过以下调整可让div完全贴合缩放后的图片，同时让右侧“Test”元素紧邻显示：

• 给图片添加 max-h-full w-auto 类：限制图片高度不超出父级容器的高度上限，同时让宽度按比例自动缩放，避免使用图片原始宽度。
• 保留包裹div的 w-fit 类：确保div宽度自适应内部缩放后的图片尺寸，加上内边距后刚好贴合图片。

修改后的代码如下：

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div class="flex max-h-96">
  <div class="flex w-fit bg-yellow-100 p-2">
    <img src="https://placehold.co/800x1000" alt="MAIN_IMAGE" class="max-h-full w-auto" />
  </div>
  <div>Test</div>
</div>

原理说明 #

• max-h-full：让图片高度不超过父级的max-h-96限制，触发图片按原始比例缩放。
• w-auto：图片宽度根据缩放后的高度自动计算，保持宽高比，避免强制使用原始宽度。
• w-fit：黄色包裹div的宽度完全适配内部缩放后的图片（包含内边距），不会额外拉伸。

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