如何让带背景图的旋转子div适配父容器且不改变父容器尺寸

问题根源 #

你遇到的核心问题是：虽然通过border-radius:50%把正方形元素变成了视觉上的圆形，但元素本身的盒模型还是正方形。当它旋转时，正方形的对角线长度（约为边长的1.414倍）会超出原正方形范围，导致父容器被撑开，出现尺寸跳动。

下面是对应你提出的两个方向的解决方案：

方案一：阻止子元素尺寸变化影响父容器

通过给父容器添加溢出隐藏，直接切掉旋转时超出的部分，彻底避免父容器尺寸被影响：

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.container {
  display: flex;
  flex-shrink: 0;
  padding: 64px;
  width: 100vw;
  position: relative; /* 让绝对定位的子元素以父容器为基准 */
  overflow: hidden; /* 隐藏旋转时超出父容器的部分 */
  box-sizing: border-box; /* 确保padding包含在100vw宽度内，避免视口横向滚动 */
}

.bg-image {
  background-image: url(https://i.imgur.com/9mhwcLH.png);
  background-size: contain;
  transform-origin: center center;
  background-position: center;
  background-repeat: no-repeat;
  animation: spin 512s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% - 128px); /* 减去左右padding总和，适配父容器内边距 */
  height: calc(100% - 128px); /* 减去上下padding总和 */
  transform: translate(-50%, -50%); /* 实现元素居中 */
  border-radius: 50%;
}

关键修改点：

• overflow: hidden直接截断旋转时超出父容器的正方形对角线部分，父容器尺寸完全不受子元素旋转影响
• box-sizing: border-box确保父容器的100vw宽度包含padding，不会因为padding导致总宽度超出视口

方案二：缩小子元素，确保旋转时始终适配父容器

利用正方形对角线与边长的比例（√2≈1.414），将子元素的尺寸缩小为父容器可用宽度的1/√2（约70.7%）。这样旋转到45度时，正方形的对角线刚好等于父容器的可用宽度，任何角度下都不会超出父容器范围：

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.container {
  display: flex;
  flex-shrink: 0;
  padding: 64px;
  width: 100vw;
  position: relative;
  box-sizing: border-box; /* 确保padding包含在宽度内 */
}

.bg-image {
  background-image: url(https://i.imgur.com/9mhwcLH.png);
  background-size: contain;
  transform-origin: center center;
  background-position: center;
  background-repeat: no-repeat;
  animation: spin 512s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  /* 按1/√2比例缩小，确保对角线不超出父容器 */
  width: calc((100% - 128px) / 1.414);
  height: calc((100% - 128px) / 1.414);
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

关键修改点：

• 子元素尺寸按比例缩小后，旋转过程中不会有任何部分超出父容器，父容器尺寸完全稳定
• 视觉上圆形会比方案一更小，但完全消除了尺寸跳动问题

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