响应式布局下，如何为应用rotate属性的图片正确设置蓝色背景？

嗨，来搞定你这个旋转后响应式图片的背景设置难题啦！核心问题在于**transform: rotate()只会改变元素的视觉呈现，不会修改它的布局占位**，所以直接给图片或父容器加背景的话，背景不会跟着旋转后的形状走，而且响应式图片的动态尺寸也让绝对定位不太好用。下面给你两个适配flex布局的可行方案：

方案一：给父容器加背景并居中图片 #

这个方案改动最小，完全适配你现有的flex结构：

.content { 
  display: flex; 
  .image { 
    flex: 0 0 50%; 
    /* 给容器设置蓝色背景 */
    background-color: blue;
    /* 允许旋转后的图片超出容器，避免被截断 */
    overflow: visible;
    /* 用flex让图片在容器内居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 可选：设置最小高度，保证容器不会因图片太小而塌陷 */
    min-height: 300px;

    img { 
      transform: rotate(85deg);
      /* 限制图片最大尺寸，避免旋转后溢出过多 */
      max-width: 90%;
      max-height: 90%;
    } 
    @include media-screen-lg { 
      padding-left: 24px; 
      padding-right: 0; 
    } 
  } 
}

原理：父容器作为背景的载体，通过flex布局让旋转后的图片居中显示，这样蓝色背景就会自然出现在图片旋转后露出的区域，同时完全支持响应式——图片尺寸变化时，容器的flex占比和居中规则会自动适配。

方案二：用伪元素匹配旋转后的图片形状 #

如果需要背景完全贴合旋转后图片的轮廓，用伪元素是更精准的选择：

.content { 
  display: flex; 
  .image { 
    flex: 0 0 50%; 
    position: relative;
    /* flex布局居中图片 */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;

    /* 生成和图片同步旋转的背景层 */
    &::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: blue;
      /* 和图片使用完全相同的旋转角度 */
      transform: rotate(85deg);
      /* 把背景层放在图片下方 */
      z-index: -1;
    }

    img { 
      transform: rotate(85deg);
      max-width: 100%;
      height: auto;
    } 
    @include media-screen-lg { 
      padding-left: 24px; 
      padding-right: 0; 
    } 
  } 
}

原理：利用父容器的伪元素创建一个和图片同步旋转的背景层，将其置于图片下方，这样背景就会完美匹配旋转后图片的形状，同时伪元素的尺寸会跟着父容器的flex占比动态调整，完全适配响应式需求。

小提示 #

• 如果你的图片带有透明区域，方案二的效果会更自然，背景会透过透明部分显示；
• 可以调整rotate()的角度，或者给图片添加transform-origin属性来改变旋转中心，适配你的布局形状；
• 测试响应式时，记得在不同屏幕尺寸下检查效果，必要时微调max-width或min-height的值。

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