如何用CSS实现图片后方形状的响应式布局？

效果展示 #

目标效果 #

当前非响应式问题 #

桌面端正常显示：

缩放后布局错乱：

原代码 #

HTML #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./cat.css" />
    <link rel="stylesheet" href="./reset.css" />
  </head>
  <body>
    <div class="person">
      <img src="cat.png" />
      <div class="r1"></div>
      <div class="r2"></div>
      <div class="r3"></div>
    </div>
  </body>
</html>

CSS #

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap");
* {
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

.person {
    position: relative;
    max-width: 25em;
    margin-left: 400px;
    margin-top: 100px;
}

img {
    object-fit: contain;
    width: 100%;
}

.r1 {
    position: absolute;
    height: 50%;
    max-width: 250px;
    width: 250px;
    background-color: #EFD2B4;
    border-radius: 15px;
    top: 0;
    left: 60px;
    opacity: .2;
    transform: rotate(-17.9deg);
    z-index: 1;
}

.r2 {
    position: absolute;
    height: 50%;
    max-width: 230px;
    width: 230px;
    background-color: #E69868;
    border-radius: 15px;
    bottom: 100px;
    opacity: .2;
    left: 20px;
    transform: rotate(15deg);
    z-index: 3;
}

.r3 {
    position: absolute;
    height: 50%;
    max-width: 230px;
    width: 230px;
    background-color: #A6BB9E;
    border-radius: 15px;
    bottom: 130px;
    opacity: .2;
    left: 200px;
    transform: rotate(8.12deg);
    z-index: 2;
}

响应式同步缩放的核心原则 #

• 抛弃固定像素，使用相对单位：用百分比、vw/vh、rem或基于父容器的比例值，替代所有固定的px尺寸和定位值，让元素随容器/视口同步缩放
• 固定容器宽高比：给父容器设置aspect-ratio，保证图片和内部装饰块始终保持一致的比例，避免变形
• 相对定位基准：保持父容器的position: relative，内部绝对定位元素的top/left/bottom用百分比，确保位置始终和图片相对应
• 自适应辅助属性：用clamp()处理圆角等细节，在不同屏幕尺寸下自动调整，兼顾视觉一致性

修改后的响应式代码 #

CSS #

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap");
* {
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

.person {
    position: relative;
    max-width: 25em;
    /* 自适应居中，替代固定margin */
    margin: 2rem auto;
    /* 按图片实际比例设置，保证容器比例固定 */
    aspect-ratio: 1 / 1.2;
}

img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.r1 {
    position: absolute;
    height: 50%;
    width: 60%;
    background-color: #EFD2B4;
    /* 自适应圆角：最小0.5rem，最大1rem，随视口宽度动态调整 */
    border-radius: clamp(0.5rem, 3vw, 1rem);
    top: 5%;
    left: 15%;
    opacity: .2;
    transform: rotate(-17.9deg);
    z-index: 1;
}

.r2 {
    position: absolute;
    height: 45%;
    width: 55%;
    background-color: #E69868;
    border-radius: clamp(0.5rem, 3vw, 1rem);
    bottom: 15%;
    left: 5%;
    opacity: .2;
    transform: rotate(15deg);
    z-index: 3;
}

.r3 {
    position: absolute;
    height: 45%;
    width: 55%;
    background-color: #A6BB9E;
    border-radius: clamp(0.5rem, 3vw, 1rem);
    bottom: 20%;
    left: 40%;
    opacity: .2;
    transform: rotate(8.12deg);
    z-index: 2;
}

修改说明 #

1. aspect-ratio锁定容器比例：确保图片和装饰块不会因为容器缩放而变形
2. 所有定位和尺寸改用百分比：让装饰块的位置和大小始终与图片保持相对比例
3. clamp()实现自适应圆角：在小屏设备上圆角不会过大，大屏上也不会过小
4. 容器居中方式优化：用margin: auto替代固定像素的margin-left，适配不同屏幕宽度

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