使用CSS旋转图片后无法正常适配尺寸的问题

为啥旋转后图片没法占满父容器？因为CSS transform 类的旋转不会改变元素的盒模型尺寸——图片的布局空间还是原来的宽高，所以设置 width:100% 也没法让旋转后的图片适配父容器。

下面给两种实用的解决方法：

方案1：用容器包裹图片，调整容器尺寸与变换 #

给图片加个外层容器，先让容器尺寸匹配旋转后的图片比例，再对容器做旋转和位置修正，就能让图片完美占满父容器：

<style>
  .rotate-container {
    width: 100%;
    aspect-ratio: 3/2; /* 原图片高度300px / 宽度200px，旋转90度后宽高互换，所以用这个比例 */
    rotate: 90deg;
    transform-origin: top left;
    translate: 0 100%; /* 旋转后容器会偏移，这个属性把它拉回父容器里 */
  }
  .rotate-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 可选：保持图片比例不拉伸，不需要可以删掉 */
  }
</style>
<div style="display: flex; width: 100%; justify-content: space-between;">
  <div style="border: 1px solid blue;width: 200px; overflow:hidden">
    <img width="100%" src="https://fastly.picsum.photos/id/840/200/300.jpg?hmac=Z8Mc1xk7GaQHQ1hkPTK4cY0dYIxDKGBCHrgyaDqE0u0" alt="">
  </div>

  <div style="border: 1px solid blue;width: 200px; overflow:hidden">
    <div class="rotate-container">
      <img width="100%" src="https://fastly.picsum.photos/id/840/200/300.jpg?hmac=Z8Mc1xk7GaQHQ1hkPTK4cY0dYIxDKGBCHrgyaDqE0u0" alt="">
    </div>
  </div>
</div>

方案2：直接调整图片的变换与尺寸 #

不用额外容器，直接对图片做缩放、旋转和位置修正，同样能达到效果：

<style>
  .rotate {
    width: 100%;
    transform: rotate(90deg) scale(0.6667) translate(0, -100%);
    transform-origin: top left;
  }
</style>
<div style="display: flex; width: 100%; justify-content: space-between;">
  <div style="border: 1px solid blue;width: 200px; overflow:hidden">
    <img width="100%" src="https://fastly.picsum.photos/id/840/200/300.jpg?hmac=Z8Mc1xk7GaQHQ1hkPTK4cY0dYIxDKGBCHrgyaDqE0u0" alt="">
  </div>

  <div style="border: 1px solid blue;width: 200px; overflow:hidden">
    <img class="rotate" src="https://fastly.picsum.photos/id/840/200/300.jpg?hmac=Z8Mc1xk7GaQHQ1hkPTK4cY0dYIxDKGBCHrgyaDqE0u0" alt="">
  </div>
</div>

方案2关键说明： #

• scale(0.6667)：原图片旋转后显示宽度是300px，父容器宽200px，用200/300≈0.6667的缩放比例，让旋转后的图片宽度刚好适配父容器。
• translate(0, -100%)：修正旋转+缩放后的位置偏移，确保图片完全在父容器内显示。

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