如何让HTML中的SVG适配单屏且无滚动条显示？

核心解决方案 #

要实现SVG居中、尽可能填满屏幕且保持宽高比、无滚动条，需要调整布局和SVG的样式属性，以下是修正后的完整代码：

<!DOCTYPE html>
<html>
<head>
<style>
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 确保不会出现滚动条 */
}
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 100%;
  height: 100%; /* 让容器占满整个视口 */
}
svg {
  max-width: 100%;
  max-height: 100%; /* SVG自动缩放至不超出容器的最大尺寸，保持宽高比 */
}
</style>
</head>
<body>
<div class="container">
<svg viewBox="0 0 250 457" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M89.6174 72.5661C78.3761 70.8794 34.9222 93.2227 19 135.503M89.6174 72.5661V2H125M89.6174 72.5661H125M19 135.503C-0.902714 188.355 -0.0185633 201.762 9.29124 288.909C17.1881 362.829 33.8318 424.189 44.8889 432.248C60.9111 443.925 84 454.607 125 454.607M19 135.503C130.2 168.307 155 202.255 125 251.842" stroke="#B9B9B9" stroke-width="4"/>
<path d="M160.383 72.5661C171.624 70.8794 215.078 93.2227 231 135.503M160.383 72.5661V2H125M160.383 72.5661H125M231 135.503C250.903 188.355 250.019 201.762 240.709 288.909C232.812 362.829 216.168 424.189 205.111 432.248C189.089 443.925 166 454.607 125 454.607M231 135.503C119.8 168.307 95 202.255 125 251.842" stroke="#B9B9B9" stroke-width="4"/>
</svg>
</div>
</body>
</html>

关键调整说明 #

1. 全屏基础布局：给html和body设置width:100%、height:100%，同时清除默认的margin和padding，加上overflow:hidden杜绝滚动条出现。
2. 容器居中设置：给.container添加align-items:center实现垂直居中，同时设置容器宽高为100%，确保它能覆盖整个视口，作为SVG的承载容器。
3. SVG自适应缩放：移除SVG的width="100%"和height="100%"属性，改用max-width:100%和max-height:100%的CSS样式。结合保留的viewBox="0 0 250 457"，SVG会自动根据视口尺寸，按原始宽高比（250:457）缩放至刚好不超出屏幕的最大尺寸，完美适配不同屏幕比例。

旧代码问题解析 #

• 设置100%宽高后出现滚动条：你给SVG强制设置width:100%和height:100%，但SVG的原始宽高比是250:457，当屏幕宽高比和这个比例不一致时（比如屏幕更宽），SVG会被强制拉伸到屏幕的宽高，导致内容超出视口（比如宽度100%时，高度按比例需要182.8%才能保持形状，超出了屏幕高度），从而出现垂直滚动条。
• 移除viewBox后图形被截断：viewBox定义了SVG的坐标系范围（0到250宽，0到457高），如果去掉它，SVG默认的坐标系范围是0到100，而你的path坐标都是250、457这类超出0-100的数值，所以只有0-100范围内的图形会被显示，超出部分直接被截断，导致看不到完整的瓶子形状。

内容的提问来源于stack exchange，提问作者Mammoth-Winner-1579