网页Hero图片底部波浪效果实现：比例不一致问题求助

方案一：修正图片拼接的缩放对齐问题 #

你当前的问题是两张图各自用background-size: cover+固定高度，导致缩放比例不一致。可以通过统一容器宽度、按比例缩放背景图来解决：

修改后的CSS代码 #

html,
body {
  margin: 0;
  padding: 0;
  height: auto; /* 移除不必要的超大高度值 */
}

/* 统一容器保证两张图宽度一致 */
.hero-container {
  width: 100%;
  position: relative;
}

.hero-image {
  width: 100%;
  min-height: 90vh;
  background-size: 100% auto; /* 宽度匹配容器，高度按原图比例自适应 */
  background-image: url("../imgs/hero_image.jpeg");
  background-position: top center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-image-footer {
  width: 100%;
  height: 100px; /* 设为你波浪图的实际高度，根据图片调整 */
  background-size: 100% auto; /* 和主图保持一致的缩放规则 */
  background-image: url("../imgs/Untitled-1.jpg");
  background-position: bottom center;
  background-repeat: no-repeat;
}

修改后的HTML代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<div class="hero-container">
  <header class="hero-image">
  </header>
  <section class="hero-image-footer">
  </section>
</div>

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-transparent">
  <div class="container">
    <a class="navbar-brand" href="javascript:void(0)">
      Name here
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

核心逻辑：用同一个容器锁定两张图的宽度，通过background-size:100% auto让主图和波浪底图按相同比例缩放，避免拉伸错位。

方案二：用SVG波浪遮罩替代切图（更灵活） #

无需裁剪图片，直接用SVG生成波浪效果，适配所有屏幕且无比例问题：

修改后的CSS代码 #

.hero-image {
  height: 90vh;
  min-height: 400px;
  background-size: cover;
  background-image: url("../imgs/hero_image.jpeg");
  background-position: center;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 用伪元素添加波浪底部 */
.hero-image::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px; /* 调整波浪高度 */
  /* 内嵌SVG波浪，可修改fill值改变波浪颜色 */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='1' d='M0,192L48,181.3C96,171,192,149,288,149.3C384,149,480,171,576,181.3C672,192,768,192,864,170.7C960,149,1056,107,1152,101.3C1248,96,1344,128,1392,144L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
  background-size: cover;
  background-position: bottom;
}

修改后的HTML代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<header class="hero-image">
</header>

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-transparent">
  <div class="container">
    <a class="navbar-brand" href="javascript:void(0)">
      Name here
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

核心逻辑：通过伪元素在Hero图底部叠加SVG波浪背景，无需额外切图，可随时调整波浪颜色、高度，适配所有屏幕尺寸。

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