如何在Tailwind的overflow-auto容器中显示图片实际尺寸

修改后的代码如下：

<body class="antialiased">
    <div class="w-2/3 mx-auto">
        <div class="relative overflow-auto max-h-[80vh]">
            <img src="/a.jpg" class="w-auto h-auto" alt="Preview image">
        </div>
    </div>
</body>

关键修改点说明： #

• 移除图片的w-full类：这个类会强制图片宽度拉伸/缩小至父容器宽度，导致图片无法触发滚动。替换为w-auto h-auto，让图片保持原始尺寸渲染。
• 给滚动容器添加max-h-[80vh]：纵向限制容器的最大高度（这里设置为视口高度的80%，可根据需求调整为固定值如h-[600px]）。当图片高度超过该限制时，纵向滚动条自动出现；横向由于外层容器固定为w-2/3，当图片原始宽度超过这个宽度时，横向滚动条也会触发。
• 可选：强制禁止图片缩放：如果需要确保图片无论大小都保持原始尺寸（即使图片比容器小），可以用max-w-none max-h-none替代w-auto h-auto，效果一致。

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