解决旋转嵌套容器中背景图片无法填满空间的技术问询

嘿，这个问题我之前也踩过坑！核心原因是旋转会改变元素的视觉边界盒，但CSS的百分比尺寸是基于元素旋转前的原始盒模型计算的。外层.headerImg旋转45°后变成菱形，内层.rotateBack设100%宽高只是对应外层旋转前的正方形尺寸，自然覆盖不了旋转后的菱形区域。

解决方案：用√2倍尺寸+居中定位适配 #

菱形的对角线长度是原正方形边长的√2倍（≈1.414），所以我们只需要把内层容器的尺寸设为外层的141.4%，再通过绝对定位+translate居中，就能完美覆盖整个菱形区域，而且会随浏览器缩放自动适配。

修改后的代码如下：

.headerImg {
  position: absolute;
  top: -100px;
  right: -100px;
  width: 50%;
  display: block;
  background: #eee;
  height: 95vh;
  overflow: hidden;
  transform: rotate(45deg);
}

.rotateBack {
  /* 设为外层的√2倍，覆盖菱形区域 */
  width: 141.4%;
  height: 141.4%;
  /* 绝对定位+translate实现完美居中 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

<div class="headerImg">
  <div class="rotateBack" style="background-image: url('https://www.rd.com/wp-content/uploads/2017/06/05-dog-breed-Safety-Tips-to-Keep-Your-Dog-in-Top-Shape-This-Summer-508549561-Yevgen-Romanenko.jpg')">
  </div>
</div>

关键细节说明 #

• 用141.4%而不是固定像素，保证内层尺寸随外层容器的缩放比例同步变化；
• translate(-50%, -50%)是基于元素自身尺寸的居中，比margin定位更适配动态尺寸；
• 外层保留overflow: hidden，可以把内层超出菱形的部分裁剪掉，只显示菱形区域内的内容。

这样调整后，内层的背景图就能完全填满外层的菱形容器，而且不管浏览器窗口怎么缩放，都能保持完美适配~

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