如何让小图片在TailwindCSS 3.1中显示原始尺寸？

你只需要把固定宽度限制改成最大宽度限制，就能让小图片保留原始尺寸，同时大图片依然维持原来的显示效果。修改后的自定义类代码如下：

.view_image {
    @apply border-2 border-gray-300 p-1 rounded-lg max-w-64 w-auto;
    height: auto;
}

具体改动的作用：

• max-w-64：替代原来的w-64，只限制图片的最大宽度为256px（对应Tailwind的w-64），超过这个尺寸的图片会被缩小适配
• w-auto：让图片宽度自动匹配自身原始尺寸，小于256px的小图片就会按照原本大小显示
• 保留height: auto：确保图片的宽高比例不会变形

这样调整后，不管是大图片还是小图片，都能获得合适的显示效果，同时边框、内边距、圆角这些样式也不受影响。

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