Flexbox布局下div旋转后图片重叠，如何按需调整图片高度？

问题根本原因 #

CSS transform 属性的旋转操作只会改变元素的视觉渲染效果，不会修改元素在正常文档流中占据的空间尺寸。横版图片旋转90度变为竖版后，视觉高度远大于原有容器的占位高度，就会溢出容器和下方行的内容重叠。

解决方案 #

你需要在旋转图片的同时，同步修改图片容器的宽高，让容器的文档流占位匹配旋转后的视觉尺寸，即可解决重叠问题，修改代码如下：

CSS修改

.row-documents {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px; /* 增加行间距避免内容贴近 */
}
.row-documents img {
    width: 100%;
    height: auto;
    display: block; /* 消除图片默认底部留白 */
}
.img-document {
    width: 615px; /* 原始横版状态宽度 */
    transition: all 0.3s ease;
    position: relative;
    flex-shrink: 0; /* 避免flex布局挤压容器宽度 */
}
/* 旋转90度状态的类 */
.img-document.rotated {
    /* 按示例图片比例1300:740计算旋转后的宽度，等于原始状态的高度 */
    width: calc(615px * 740 / 1300);
    height: 615px; /* 旋转后高度等于原始状态的宽度 */
}
.img-document.rotated img {
    position: absolute;
    top: 0;
    left: 0;
    width: 615px;
    height: calc(615px * 740 / 1300);
    transform-origin: center center;
    /* 旋转+偏移修正位置，和容器对齐 */
    transform: rotate(90deg) translate(calc((615px - calc(615px * 740 / 1300))/2), calc((615px - calc(615px * 740 / 1300))/-2));
}
.rotate-button {
    margin: 0 10px;
    width: 50px;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

交互逻辑JS代码

document.querySelectorAll('.btn-rotate').forEach(btn => {
  btn.addEventListener('click', function() {
    // 获取当前按钮对应的图片容器
    const imgContainer = this.parentElement.previousElementSibling;
    imgContainer.classList.toggle('rotated');
  })
})

如果你的图片比例不固定，可以在JS中获取对应图片的原始宽高，动态计算容器需要修改的宽高值，逻辑完全一致。

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