如何使用TailwindCSS让旋转后的图片适配容器高度？

问题原因 #

使用rotate-90旋转图片时，元素的布局占位尺寸不会随旋转改变，仅视觉方向反转。你的示例中，容器为w-[560px] h-[315px]，图片先以容器宽高填充，旋转后视觉尺寸方向反转，导致内容超出容器边界。

解决方案1：绝对定位+平移居中（精准适配容器） #

通过绝对定位将旋转后的图片居中，同时限制显示范围：

<div class="p-8">
  <div class="h-[315px] w-[560px] border-2 border-solid relative overflow-hidden">
    <img src="https://source.unsplash.com/user/c_v_r/1900x800" class="absolute top-1/2 left-1/2 rotate-90 transform -translate-x-1/2 -translate-y-1/2 h-full w-full object-fill" />
  </div>
</div>

• 容器添加relative（作为图片定位基准）和overflow-hidden（裁剪超出部分）
• 图片通过top-1/2 left-1/2和-translate-x-1/2 -translate-y-1/2实现旋转后的居中对齐
• object-fill确保图片内容填充容器空间

解决方案2：调整图片宽高比适配旋转需求 #

容器原始比例为16:9，旋转90度后需适配9:16的比例，通过自定义宽高比实现：

<div class="p-8">
  <div class="h-[315px] w-[560px] border-2 border-solid overflow-hidden">
    <img src="https://source.unsplash.com/user/c_v_r/1900x800" class="aspect-[9/16] w-full h-full rotate-90 transform object-fill" />
  </div>
</div>

• aspect-[9/16]强制图片使用旋转后的适配比例
• overflow-hidden裁剪超出容器的内容

补充说明 #

若需完整显示图片不裁剪，可将object-fill替换为object-contain，此时图片会保持原始比例并居中显示在容器内。

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