图片rotate(90)后顶部被截断，overflow:auto无效，如何调整容器CSS？

这个问题我之前也踩过坑，本质是CSS transform的特性导致的：当你用rotate(90deg)旋转元素时，只是在视觉上改变了它的方向，但元素的原始布局盒模型尺寸（2048x1024）并没有变化。容器的overflow:auto是基于这个原始尺寸计算的，而旋转后图片的实际视觉尺寸变成了1024x2048，容器高度不足以容纳，自然就会截断顶部内容。

下面给你两种可行的容器CSS调整方案，都能实现上下方向的溢出滚动：

方案一：调整变换原点+位移修正 #

这种方法通过修改变换原点，配合translate把旋转后的图片拉回容器的可视范围，同时让容器自适应旋转后的元素尺寸：

#container {
  width: 100%;
  overflow: auto;
  /* 让容器根据子元素实际占用空间计算高度 */
  display: inline-block;
}

.rotate90 {
  /* 先旋转90度，再向上位移自身高度（100%指元素原始高度） */
  transform: rotate(90deg) translateY(-100%);
  /* 将变换原点设置为元素左下角 */
  transform-origin: bottom left;
}

原理：把变换原点移到左下角后，旋转90度会让图片的顶部超出容器，再用translateY(-100%)把图片拉回容器内，同时display:inline-block让容器自动适配旋转后元素的实际高度，此时overflow:auto就能在上下方向正常触发滚动条了。

方案二：固定容器宽高比+居中定位 #

如果需要容器保持100%宽度，可以通过aspect-ratio强制容器匹配旋转后的图片比例，再用定位让图片居中：

#container {
  width: 100%;
  overflow: auto;
  /* 旋转后图片的宽高比为 原始高度/原始宽度 = 1024/2048 = 0.5 */
  aspect-ratio: 0.5;
}

.rotate90 {
  /* 旋转后居中定位 */
  transform: rotate(90deg) translate(-50%, -50%);
  transform-origin: center;
  position: relative;
  top: 50%;
  left: 50%;
}

原理：aspect-ratio:0.5让容器的高度始终是宽度的一半，刚好匹配旋转后图片的视觉尺寸，再通过translate和定位把旋转后的图片居中，这样容器的空间足够容纳图片，溢出时会自动显示上下滚动条。

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