如何用Tailwind实现以主图宽度为准的图片拼贴布局？

核心要实现父容器宽度与主图一致，同时让小图自动适配，可通过以下调整Tailwind类实现：

修改要点 #

• 外层容器移除固定宽度类lg:w-1/3，改用w-fit，让容器宽度自动匹配主图实际宽度。
• 内层flex容器去掉items-center，避免限制子元素宽度，确保小图容器能和主图同宽。
• 所有图片添加w-full h-auto，保证图片自适应容器且比例正常。
• 小图的父元素添加flex-1，让三个小图平分宽度；同时给small-images容器设置w-full，确保其宽度与主图一致。

修改后的代码 #

<div class="product-images w-fit my-10 bg-bg_color rounded-2xl">
    <div class="flex flex-col p-4 gap-y-2">
        <img src="{{ asset('img/man.jpeg')}}" alt="" class="w-full h-auto">
        <div class="small-images flex gap-x-2 w-full">
            <div class="flex-1">
                <img src="{{ asset('img/man.jpeg')}}" alt="" class="w-full h-auto">
            </div>
            <div class="flex-1">
                <img src="{{ asset('img/man.jpeg')}}" alt="" class="w-full h-auto">
            </div>
            <div class="flex-1">
                <img src="{{ asset('img/man.jpeg')}}" alt="" class="w-full h-auto">
            </div>
        </div>
    </div>
</div>

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