如何让旋转div与含旋转文本的图片精准对位？

现有代码 #

HTML代码 #

<div class="container">
   <img class="img" src="https://i.sstatic.net/tI1Sg.png" />
   <div class="underlay"></div>
</div>

图片说明 #

图片内的文本旋转了10度，但图片本身是常规矩形：

CSS代码 #

.container {
   position: relative;
   width: 100%;
   height: 100%;
}

.img {
   height: 20vh;
   width: auto;
   position: absolute;
   top: 5vh;
   left: 5vh;
}

.underlay {
  position: absolute;
  top: 5vh;
  left: 5vh;
  background-color: rgba(0, 0, 0, .5);
  width: 100%;
  height: 15vh;
  transform: rotate(-10deg);
}

当前显示效果 #

问题 #

如何让underlay精准匹配并定位在图片下方？我知道可能需要三角函数解决，但不知从何入手。手动调整仅在部分宽度下有效，视口宽度增加时两者会错位，虽均使用vh单位但仍出现该问题，怀疑与left定位有关。

解决方案 #

方案一：嵌套容器反向旋转（无需三角函数，简单高效） #

核心逻辑是让遮罩和图片在同一个容器里同步旋转，再单独把图片反向旋转回正常状态，这样两者自然对齐，不会随视口变化错位。

修改后的代码：

<div class="container">
  <div class="img-wrapper">
    <img class="img" src="https://i.sstatic.net/tI1Sg.png" />
    <div class="underlay"></div>
  </div>
</div>

.container {
  position: relative;
  width: 100%;
  height: 100%;
}

.img-wrapper {
  position: absolute;
  top: 5vh;
  left: 5vh;
  /* 让容器带着内部元素一起旋转 */
  transform: rotate(-10deg);
}

.img {
  height: 20vh;
  width: auto;
  /* 反向旋转图片，恢复正常显示 */
  transform: rotate(10deg);
  z-index: 1; /* 保证图片在遮罩上方 */
}

.underlay {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .5);
  /* 完全匹配图片尺寸 */
  height: 20vh;
  width: 100%;
}

方案二：三角函数计算定位（精准控制） #

如果一定要用三角函数实现，核心是计算旋转带来的位置偏移和尺寸补偿，以下是具体实现：

:root {
  --rotate-angle: -10deg;
  --img-height: 20vh;
  --underlay-height: 15vh;
  --initial-top: 5vh;
  --initial-left: 5vh;
  --img-aspect-ratio: 1.7778; /* 替换为你图片的实际宽高比，比如16/9≈1.7778 */
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; /* 防止旋转元素超出容器 */
}

.img {
  height: var(--img-height);
  width: auto;
  position: absolute;
  top: var(--initial-top);
  left: var(--initial-left);
  z-index: 1;
}

.underlay {
  position: absolute;
  background-color: rgba(0, 0, 0, .5);
  height: var(--underlay-height);
  transform: rotate(var(--rotate-angle));
  
  /* 角度转弧度（CSS三角函数需要弧度值） */
  --rad: calc(var(--rotate-angle) * 3.14159 / 180);
  /* 计算垂直偏移量 */
  --y-offset: calc(sin(var(--rad)) * var(--underlay-height));
  /* 计算水平偏移量 */
  --x-offset: calc((1 - cos(var(--rad))) * var(--underlay-height));
  /* 调整定位，对齐图片 */
  top: calc(var(--initial-top) + var(--y-offset));
  left: calc(var(--initial-left) - var(--x-offset));
  
  /* 计算适配旋转后的宽度 */
  --img-width: calc(var(--img-height) * var(--img-aspect-ratio));
  --underlay-width: calc(var(--img-width) / cos(var(--rad)) + 2 * abs(sin(var(--rad))) * var(--underlay-height));
  width: var(--underlay-width);
}

关键说明：

• 弧度转换：CSS的sin/cos函数需要传入弧度值，所以要把角度转成弧度（角度 × π ÷ 180）
• 位置偏移：旋转后元素的视觉位置会偏移，通过三角函数计算补偿值，调整top和left实现对齐
• 宽度适配：旋转后元素的视觉宽度会变大，需要计算扩容后的宽度，保证完全覆盖图片区域

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