调整Flexbox高度后，如何使容器宽度匹配图片宽度？

给每个带蓝色背景的div加上w-fit类就能解决这个问题，修改后的代码如下：

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

<div class="flex flex-row justify-around h-40">
    <div class="bg-blue-700 w-fit">
        <img class="h-full" src="https://picsum.photos/500/700">
    </div>
    <div class="bg-blue-700 w-fit">
        <img class="h-full" src="https://picsum.photos/500/700">
    </div>
</div>

原因很直接：Flex布局里的子元素默认会尽可能填充容器的可用空间，哪怕内部内容（这里的图片）宽度更小。w-fit类会强制元素宽度由内部内容决定，这样蓝色背景容器的宽度就会和图片完全对齐，同时保留你设置的高度和图片宽高比。

你也可以用inline-block替代w-fit，效果一致，但w-fit是Tailwind专为适配内容宽度设计的类，语义更清晰。

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