SVG保持宽高比并最大化显示的实现问题

你遇到的问题核心是没有让浏览器正确根据SVG的viewBox自动计算高度，再加上html/body的默认样式干扰，导致比例无法正常生效。下面提供两种可靠的解决方案：

方案一：直接调整SVG样式并重置父元素默认样式 #

这种方法最简洁，只需要补全SVG的高度规则，同时重置html和body的默认边距，让它们的宽度完全占满视口：

/* 重置html和body的默认边距与宽度 */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* 调整SVG样式，添加height:auto是关键 */
svg {
  width: 100%;
  height: auto; /* 让浏览器根据viewBox的10:3比例自动计算高度 */
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: block;
  background: #0f0;
}

你的SVG代码保持不变即可：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 300"> 
  <path d="m1.25e-5 0v300h1e3v-300zm500 71.449 68.031 39.277v78.557l-68.031 39.279-68.031-39.279v-78.557z" fill="#f00"/> 
</svg>

原理：viewBox="0 0 1000 300"已经定义了10:3的固定比例，当设置width:100%和height:auto时，浏览器会自动根据当前宽度计算对应高度，完美维持比例。

方案二：用容器包裹SVG（适合复杂布局场景） #

如果需要在多场景复用这个比例，或者担心旧浏览器兼容性，可以用一个容器来锁定比例，再让SVG填满容器：

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* 比例容器：padding-top的百分比基于宽度，30%对应10:3（3/10=0.3） */
.svg-container {
  width: 100%;
  padding-top: 30%;
  position: relative;
  background: #0f0;
}

/* SVG绝对定位，完全填满容器 */
.svg-container svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

然后修改HTML结构，把SVG放进容器：

<div class="svg-container">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 300"> 
    <path d="m1.25e-5 0v300h1e3v-300zm500 71.449 68.031 39.277v78.557l-68.031 39.279-68.031-39.279v-78.557z" fill="#f00"/> 
  </svg>
</div>

原理：CSS中百分比内边距是基于父元素宽度计算的，padding-top:30%会让容器高度始终是宽度的30%，SVG绝对定位后会填满容器，自然保持10:3的比例。

这两种方法在Chrome中都能完美解决你的问题，优先推荐第一种方案，更简洁直接。

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