添加SVG波浪背景并实现响应式的技术求助

嘿，我来帮你搞定这个SVG波浪图的响应式问题！你遇到的缩放异常，主要是因为SVG的定位方式和缩放规则没设置对，咱们一步步调整就能解决：

问题分析 #

你当前的代码里，SVG是放在.site-background容器内用padding-top来定位，这种固定的内边距在不同屏幕尺寸下会导致SVG位置偏移；另外SVG的preserveAspectRatio属性设置也没适配全屏宽度的需求，所以缩放时会出现显示异常。

修改后的完整代码 #

HTML

<section class="site-title">
  <div class="site-background">
    <h1>Who Am I?</h1>
    <h2>I am a <span class="txt-type" data-wait="5000" data-words='["example", "example"]'></span></h2>
  </div>
  <div class="svg">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1420 320" preserveAspectRatio="xMidYMin slice">
      <path fill="#ffffff" fill-opacity="1" d="M0,224L120,240C240,256,480,288,720,266.7C960,245,1200,171,1320,133.3L1440,96L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z"></path>
    </svg>
  </div>
</section>
<section class="space">
  <div class="empty"></div>
</section>

CSS

/* Site Title */
main .site-title{
  background: url(../assets/Wallpaper-2.jpg);
  background-size: cover;
  height: 110vh;
  display: flex;
  justify-content: center;
  position: relative; /* 设置相对定位，作为绝对定位元素的基准 */
  overflow: hidden; /* 防止SVG超出容器范围 */
}

main .site-title .svg{
  position: absolute; /* 绝对定位固定在底部 */
  bottom: 0;
  left: 0;
  width: 100%; /* 宽度占满容器 */
  height: auto; /* 高度自适应保持SVG比例 */
}

main .site-title .site-background{
  padding-top: 10rem;
  text-align: center;
  color: white;
}

html,body{
  margin: 0%;
  box-sizing: border-box;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

关键修改点说明 #

• 给.site-title添加position: relative和overflow: hidden：确保SVG的绝对定位以section为基准，同时避免SVG超出容器导致横向滚动或显示异常。
• 调整.svg容器为绝对定位：bottom: 0让波浪图始终贴在section的底部，不管屏幕怎么缩放都不会错位；width: 100%让SVG横向铺满整个容器，height: auto保持SVG的原始宽高比。
• 修改SVG的preserveAspectRatio：使用xMidYMin slice可以让SVG保持宽高比，横向铺满容器的同时，纵向超出部分会被裁剪（如果想要完全拉伸适配容器，也可以改成preserveAspectRatio="none"，但可能会让波浪变形，根据你的视觉需求选择）。
• 移除了.site-background中重复的padding-top，避免布局冲突。

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