嘿，这个问题我之前也遇到过！旋转图片后和旁边盒子重叠的核心原因是：CSS transform旋转只会改变元素的视觉呈现，但它占据的布局空间还是原来的宽高，所以才会挤到旁边的盒子。既然image-orientation兼容性不行，给你几个靠谱的替代方案：

这个方案的思路是：用transform旋转图片，同时给图片套一个容器，把容器的宽高设置成图片旋转后的实际尺寸（也就是交换原图的宽和高），这样容器会占据正确的布局空间，不会和旁边的盒子重叠。

示例代码： #

HTML结构：

<div class="box left-box">左侧盒子</div>
<div class="img-wrapper">
  <img src="your-image.jpg" alt="待旋转图片" class="rotated-img">
</div>
<div class="box right-box">右侧盒子</div>

CSS样式：

.box {
  width: 200px;
  height: 300px;
  background: #f0f0f0;
  display: inline-block;
  vertical-align: top;
}

.img-wrapper {
  display: inline-block;
  /* 这里先写死示例值，实际用JS动态设置 */
  width: 300px; 
  height: 400px;
  vertical-align: top;
}

.rotated-img {
  position: relative;
  top: 50%;
  left: 50%;
  /* 先平移再旋转，确保图片在容器内居中 */
  transform: translate(-50%, -50%) rotate(90deg);
}

如果图片尺寸是动态的（比如用户上传的），用JS获取图片原始宽高，然后交换设置给容器：

const img = document.querySelector('.rotated-img');
const wrapper = img.parentElement;

// 确保图片加载完成后再处理
img.onload = function() {
  // 容器宽度设为图片原始高度，高度设为图片原始宽度
  wrapper.style.width = `${img.naturalHeight}px`;
  wrapper.style.height = `${img.naturalWidth}px`;
}

这个方案是直接修改图片的像素数据，让图片本身变成旋转后的状态，这样布局时浏览器会直接用旋转后的宽高来计算空间，从根源上避免重叠问题，而且兼容性拉满（所有支持Canvas的浏览器都能用，包括几乎所有移动端）。

示例代码： #

function rotateImageToNewSrc(img, rotateDegrees) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  // 根据旋转角度调整画布尺寸
  if (rotateDegrees === 90 || rotateDegrees === 270) {
    canvas.width = img.naturalHeight;
    canvas.height = img.naturalWidth;
  } else {
    canvas.width = img.naturalWidth;
    canvas.height = img.naturalHeight;
  }

  // 旋转画布并绘制图片
  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.rotate(rotateDegrees * Math.PI / 180);
  ctx.drawImage(img, -img.naturalWidth / 2, -img.naturalHeight / 2);

  // 把Canvas内容转为图片URL，替换原图片的src
  img.src = canvas.toDataURL('image/jpeg');
}

// 使用方法
const targetImg = document.querySelector('.rotated-img');
targetImg.onload = function() {
  // 旋转90度
  rotateImageToNewSrc(this, 90);
}

如果你的图片是可以提前处理的（比如网站的静态图片、用户上传后存储的图片），最省心的方法是在服务端直接把图片旋转好再返回给前端。这样前端完全不需要做任何布局调整，兼容性100%。

比如用Python的PIL库、Node.js的sharp库，都能轻松实现图片旋转操作，代码也很简单。

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