如何用Tailwind CSS 3设置图片最大宽高并去除边框右侧空白？

问题根源 #

• 最初的固定宽度类（md:w-11/12）会强制容器占满对应宽度，导致小图片被拉伸变形。
• 修改后仍存在右侧空白，是因为容器宽度仍大于小图片实际宽度，边框会包裹整个容器宽度而非图片尺寸。

解决方案 #

1. 调整容器宽度规则

将容器的固定宽度类替换为最大宽度类，同时添加inline-block让容器宽度自适应图片内容：

.img_preview_wrapper {
    @apply border-2 m-1 p-1 border-gray-400 rounded-lg inline-block md:max-w-11/12 xl:max-w-8/12;
}

• inline-block：让容器宽度贴合图片尺寸，不再强制占满父容器，直接消除小图片时的右侧空白。
• md:max-w-11/12/xl:max-w-8/12：限制容器的最大宽度，确保大图片不会超出设定的比例范围。

2. 约束图片显示规则

给内部图片添加max-w-full max-h-full，确保图片按原比例显示，既不超出容器边界也不会被强制拉伸：

.img_preview_img {
    @apply max-w-full max-h-full;
}

可选优化：容器居中显示

如果需要小图片的容器在页面居中，可以给容器的父元素添加flex justify-center，或者直接给容器加mx-auto（需确保父容器为块级元素）：

<!-- 父容器示例 -->
<div class="flex justify-center">
  <div class="img_preview_wrapper">
    <img src="your-image.jpg" class="img_preview_img" alt="预览图">
  </div>
</div>

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