div内旋转图片溢出容器并重叠其他div内容的技术求助

问题根源 #

1. 图片使用position: absolute脱离文档流，导致父容器#cat-image高度塌陷，无法约束旋转后的图片
2. transform: rotate()会让元素超出自身原边界，直接溢出父容器
3. 脱离文档流的图片会覆盖正常文档流中的左侧内容

修复方案 #

方案1：约束容器并隐藏溢出 #

给父容器添加定位和溢出控制，同时调整图片定位方式，让它留在文档流中：

#cat-image {
  position: relative;
  /* 设置和图片匹配的尺寸，防止容器塌陷 */
  height: 570px;
  width: 350px;
  /* 隐藏超出容器的部分 */
  overflow: hidden;
  /* 让容器在列内居中，可选 */
  margin: 0 auto;
}

.image1 {
  height: 570px;
  width: 350px;
  transform: rotate(25deg);
  /* 替换absolute为relative，保留在文档流 */
  position: relative;
  /* 可选：调整旋转原点，让旋转更贴合容器 */
  transform-origin: center;
  z-index: 0;
}

方案2：保留完整图片，避免内容重叠 #

如果不想隐藏旋转溢出的部分，给左侧内容提高层级，同时让图片容器预留足够空间：

/* 给左侧内容设置更高层级，防止被图片覆盖 */
.row .col-lg-6:first-child {
  position: relative;
  z-index: 1;
}

#cat-image {
  position: relative;
  /* 预留足够空间容纳旋转后的图片 */
  min-height: 650px;
  padding: 20px;
}

.image1 {
  height: 570px;
  width: 350px;
  transform: rotate(25deg);
  position: relative;
  /* 向右偏移，避免溢出到左侧内容区 */
  left: 30px;
}

方案3：用transform-box优化旋转边界（现代浏览器可用） #

通过transform-box: fill-box让旋转基于元素自身边界计算，配合容器约束：

.image1 {
  height: 570px;
  width: 350px;
  transform: rotate(25deg);
  position: relative;
  transform-box: fill-box;
}

#cat-image {
  position: relative;
  overflow: hidden;
  height: 570px;
  width: 350px;
}

原HTML结构无需修改，直接应用上述CSS即可解决问题。

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