如何让旋转容器内的图片保持正立并铺满容器？

我在Nuxt项目中使用Tailwind CSS制作视觉效果时遇到了问题：将图片放置在旋转的div容器中，容器旋转时内部图片会同步跟着旋转相同角度。需要实现的效果是：容器保持旋转状态，内部图片始终正立且铺满容器。

原始代码示例 #

<template>
  <div class="p-4">
    <div class="w-80 h-80 bg-blue-500 rotate-90">
      <div class="w-80 h-80 bg-red-500 rotate-45">
        <img
          class="h-full w-full object-cover object-center"
          src="https://www.aerointernational.de/content/uploads/2022/09/albums-global-8000-exterior-1_0-scaled-1150x600.jpg"
          alt="aircraft"
        />
      </div>
    </div>
  </div>
</template>

解决方案 #

核心思路是给图片应用与容器总旋转角度相反的旋转值，抵消容器旋转带来的图片偏转，同时通过样式调整保证图片铺满容器。

修改后的代码

<template>
  <div class="p-4">
    <div class="w-80 h-80 bg-blue-500 rotate-90 overflow-hidden">
      <div class="w-80 h-80 bg-red-500 rotate-45 overflow-hidden">
        <img
          class="h-full w-full object-cover object-center rotate-[-135deg]"
          src="https://www.aerointernational.de/content/uploads/2022/09/albums-global-8000-exterior-1_0-scaled-1150x600.jpg"
          alt="aircraft"
        />
      </div>
    </div>
  </div>
</template>

关键说明

1. 反向旋转抵消：外层容器旋转90度，内层容器额外旋转45度，总旋转角度为135度。给图片添加rotate-[-135deg]，反向旋转相同角度，就能让图片保持正立。
2. 隐藏溢出内容：给两层容器都加上overflow-hidden，避免图片旋转后超出容器的可视区域。
3. 保持铺满效果：保留object-cover object-center，确保图片按比例铺满容器且居中显示，不会出现拉伸变形。

动态旋转场景适配

如果容器的旋转角度是动态变化的，可以通过计算属性动态绑定图片的旋转角度：

<template>
  <div class="p-4">
    <div :class="`w-80 h-80 bg-blue-500 rotate-[${outerRotate}deg] overflow-hidden`">
      <div :class="`w-80 h-80 bg-red-500 rotate-[${innerRotate}deg] overflow-hidden`">
        <img
          :class="`h-full w-full object-cover object-center rotate-[-${outerRotate + innerRotate}deg]`"
          src="https://www.aerointernational.de/content/uploads/2022/09/albums-global-8000-exterior-1_0-scaled-1150x600.jpg"
          alt="aircraft"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
// 可根据业务需求动态调整这两个值
const outerRotate = 90
const innerRotate = 45
</script>

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