如何让SVG在所有屏幕尺寸下铺满Header并保持宽高比？

问题根源 #

小屏幕下SVG与Header底部出现间隙，是因为SVG默认的preserveAspectRatio属性采用xMidYMid meet规则——按容器长边缩放SVG，导致高度无法完全覆盖Header；同时SVG未设置强制占满容器的样式，存在默认间距。

解决方案 #

1. 调整SVG的缩放规则 #

给SVG添加preserveAspectRatio="xMinYMin slice"属性，让SVG以高度铺满容器为优先，宽度按原比例放大，超出Header的部分会被Header的overflow-hidden裁剪，既保证上下无间隙，又维持SVG的宽高比。

2. 强制SVG占满容器 #

给SVG设置CSS样式，消除默认inline元素间隙，确保完全填充父容器。

3. 优化容器样式 #

明确容器的定位属性，保留原设计的位移和尺寸限制。

修改后的代码 #

CSS部分 #

:root {
  /*add some transparency */
  --mark-bg-light: linear-gradient(0deg, transparent 20%, rgba(255, 255, 255, 0.75) 20%, rgba(255, 255, 255, 0.75) 84%, transparent 84%);
  --hero-mark: var(--mark-bg-light);
}

.hero-section {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 70vh;
}

mark.mark-hero {
  background: var(--hero-mark);
  padding: 0.5rem;
  animation: none;
}

@media (prefers-color-scheme: dark) {
  h1 .mark-hero {
    color: black;
  }
}

.band--header__image__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 2500px;
  transform: translateX(-70%);
  z-index: 0;
}

/* 新增：强制SVG占满容器 */
.band--header__image__overlay svg {
  display: block;
  width: 100%;
  height: 100%;
}

HTML中的SVG部分 #

<svg focusable="false" aria-hidden="true" viewBox="0 0 1475 1000" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin slice">
  <path fill="blue" d="M0 0h1101.85L815.1 1000H0z"></path>
  <path fill="green" d="M814.32 1000L1101.07 0h187.25l-286.74 1000z"></path>
  <path fill="yellow" d="M1000.96 1000L1287.71 0h187.25l-286.74 1000z"></path>
</svg>

关键说明 #

• preserveAspectRatio="xMinYMin slice"：xMinYMin让SVG左上角与容器左上角对齐，slice规则确保SVG按高度铺满容器，宽度超出部分被Header的overflow-hidden隐藏，彻底解决底部间隙问题。
• svg设置display:block：消除inline元素默认的底部空白间隙；width:100%; height:100%;确保SVG完全填充父容器。
• 保留原transform: translateX(-70%)和max-width:2500px：维持你原本的视觉布局需求。

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