如何实现SVG响应式缩放，适配各类屏幕尺寸与方向？

看起来你遇到的核心问题是硬编码的百分比位移和绝对定位，导致SVG遮罩在不同屏幕尺寸下错位、渐变背景侧边露出。下面我给你一套能彻底解决这个问题的方案，核心是重构布局逻辑，让SVG和容器尺寸动态绑定：

关键问题分析 #

当前实现用了transform: translateY(-53%)这类固定百分比值，在320x770的固定尺寸下能匹配设计，但屏幕尺寸变化时，SVG高度和容器高度的比例改变，就会导致遮罩偏移、背景露出。而且独立的img标签很难和容器做到无缝适配。

解决方案步骤 #

1. 重构布局结构 #

把.wave-wrapper改成自适应内部内容的容器，将遮罩SVG作为容器的背景层（而非独立绝对定位元素），确保SVG始终和容器尺寸绑定。

2. 优化SVG缩放行为 #

用background-size: cover控制SVG背景图的缩放，确保它能覆盖容器宽度，同时保持自身比例不拉伸变形。

3. 动态控制遮罩位置 #

用容器的padding预留顶部/底部空白，结合伪元素的绝对定位，让遮罩精准衔接渐变背景的边缘，代替硬编码的位移值。

修改后的完整代码 #

CSS 部分 #

main section { 
  height: 100vh; 
  width: 100vw; 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
}

.wave-wrapper {
  background: linear-gradient(#0e548c, #197d89, #0e548c);
  position: relative;
  /* 预留顶部/底部空白，代替原有的margin */
  padding-top: 160px;
  padding-bottom: 80px;
}

/* 用伪元素实现遮罩，作为容器的背景层 */
.wave-wrapper::before,
.wave-wrapper::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 1;
  background-repeat: no-repeat;
  background-size: cover;
}

/* 顶部遮罩：定位在容器顶部，底部对齐渐变背景 */
.wave-wrapper::before {
  top: 0;
  height: 200px; /* 根据SVG实际高度调整 */
  background-image: url('https://ste6y.sse.codesandbox.io/_nuxt/assets/waves-mask-1.svg');
  background-position: bottom center;
}

/* 底部遮罩：定位在容器底部，顶部对齐渐变背景 */
.wave-wrapper::after {
  bottom: 0;
  height: 200px;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMjAiIGhlaWdodD0iMTI5OS43NTciIHZpZXdCb3g9IjAgMCAzMjAgMTI5OS43NTciPgogIDxnIGlkPSJHcm91cGVfMTAiIGRhdGEtbmFtZT0iR3JvdXBlIDEwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjQ3NSAtMTcxOSkiPgogICAgPHBhdGggaWQ9IlRyYWPDg8KpXzMxIiBkYXRhLW5hbWU9IlRyYWPDg8KpIDMxIiBkPSJNLTExNDUsMjE1NC43NTdWOTc5LjA2czMuOTkxLDI1LjU3MiwyNi4zNjksNTMuOTE5LDMzLjgxMiw0MS4zNTUsNjMuMTQyLDU5LjQ2OGMxNy4yMTIsMTAuNjI5LDMyLjk4NywxNy45MzUsNDcuNTc1LDI1LjMzMiw0OS42MiwyNS4xNjEsODYuOTQyLDMzLjc2LDg2Ljk0MiwzMy43NnM1Mi40NTQsNy40NDQsOTUuNSw3Mi4xNzV2OTMxLjA0MloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExNDUgODY0KSIgZmlsbD0iI2ZmZiIvPgogICAgPHBhdGggaWQ9IlRyYWPDg8KpXzMyIiBkYXRhLW5hbWU9IlRyYWPDg8KpIDMyIiBkPSJNLTExNDUsODU1cy05LjY4NCw5OC41ODcsNTguNDQ3LDE3My44MzhjMzkuNTE2LDQzLjY0NSwxMTguMTYsODcuMDE5LDE2MC40NDYsMTA1LjE3MiwzMC40LDEzLjA0OSwzNC44OTEsMTEuMjM1LDYyLjIsMzEuNzQ4LDI3LjMzMSwyMy45MTEsMzguNDMsNTguNDQ3LDM4LjQzLDU4LjQ0N3MtMjguNjEtMzkuNDgxLTY0LjEtNTguNDQ3Yy0xMy45ODMtNy40NzMtNDQuNTE5LTE2LjkxNC02OS4yNzctMjYuMzc2LTM3LjM3Ny0xNC4yODUtNzYuMjMyLTMwLjYtMTEwLjY0My01NS43ODEtNTYuNzg0LTQxLjU1NS03NS41MDYtOTkuNTMxLTc1LjUwNi05OS41MzFaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMTQ1IDg2NCkiIGZpbGw9IiM5M2I1YzUiLz4KICA8L2c+Cjwvc3ZnPgo=');
  background-position: top center;
}

.above-waves {
  position: relative;
  z-index: 2; /* 确保内容层在遮罩上方 */
}

.white {
  color: #fff;
  /* 移除原有的margin-top，容器padding已预留空白 */
}

HTML 部分 #

<main>
  <section>Section A</section>
  <div class="wave-wrapper">
    <div class="above-waves">
      <section>Section B</section>
      <section>Section C</section>
    </div>
  </div>
  <div>
    <section>Section D</section>
  </div>
</main>

改动说明 #

1. 伪元素替代独立img标签：把两个遮罩SVG转为容器的伪元素背景图，自动继承容器宽度，用background-size: cover保证适配且比例不变。
2. 精准定位遮罩：顶部遮罩bottom center对齐渐变顶部，底部遮罩top center对齐渐变底部，彻底解决位移错位问题。
3. padding预留空白：容器的padding-top/bottom代替原有的内容margin，让空白区域和渐变背景绑定，缩放时保持一致比例。
4. 层级控制：保持内容层的高z-index，确保内容始终在遮罩上方。

这样修改后，无论屏幕尺寸或方向如何变化，SVG遮罩都会自动适配容器，和渐变背景完美衔接，再也不会出现错位或侧边露出的问题。

内容的提问来源于stack exchange，提问作者Théo Lavaux