我想创建一个只包含一个svg元素的页面，该元素适合宽度和高度，并具有最大可能的比例。
svg
93ze6v8z1#
相关问题How can I make an svg scale with its parent container?How to resize an image to fit in the browser window?不起作用，但结合建议的方法解决了问题。1)将<svg ...>标签中的width="A" height="B"替换为viewBox="0 0 A B" max-width="100%" width="auto" max-height="100vh" height="auto"。现在它几乎工作，但不是很准确，因为浏览器自动添加margin: 8到body的风格（即使没有.html文件中的<body>标记）.所以2)添加<style> body { margin: 0 } </style>
<svg ...>
width="A" height="B"
viewBox="0 0 A B" max-width="100%" width="auto" max-height="100vh" height="auto"
margin: 8
body
.html
<body>
<style> body { margin: 0 } </style>
yr9zkbsy2#
这可能会有帮助。我用这个CSS来适应背景图像的宽度和高度，它会根据浏览器的大小相应地缩小。
html { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: relative; }
您可以在DIV中设置SVG并向其中添加一个类，然后只需使用上面的CSS来缩放DIV的内容。
uajslkp63#
把你的图片放到一个div中，然后应用这些css规则：
div{ height:100vw; height:100vh; } svg{ height:100%; width:100% }
bvpmtnay4#
这是你们的解决方案。查看链接here
html, body { margin: 0; padding: 0; overflow: hidden; box-sizing: border-box; } .svg-cont { width: 100vh; height: 100vh; display: flex; justify-content: center; margin: auto; } .svg-cont > svg { width: 100%; height: 100%; }
4条答案
按热度按时间93ze6v8z1#
相关问题
How can I make an svg scale with its parent container?
How to resize an image to fit in the browser window?
不起作用，但结合建议的方法解决了问题。
1)将
<svg ...>标签中的width="A" height="B"替换为viewBox="0 0 A B" max-width="100%" width="auto" max-height="100vh" height="auto"。现在它几乎工作，但不是很准确，因为浏览器自动添加
margin: 8到body的风格（即使没有.html文件中的<body>标记）.所以2)添加
<style> body { margin: 0 } </style>yr9zkbsy2#
这可能会有帮助。我用这个CSS来适应背景图像的宽度和高度，它会根据浏览器的大小相应地缩小。
您可以在DIV中设置SVG并向其中添加一个类，然后只需使用上面的CSS来缩放DIV的内容。
uajslkp63#
把你的图片放到一个div中，然后应用这些css规则：
bvpmtnay4#
这是你们的解决方案。查看链接here