Question

我想创建一个页面，其中只包含一个符合宽度和高度的svg元素，并且具有最大可能的比例。

Answer 1

将您的图片放入div中，并应用这些css规则：

div{
  height:100vw;
  height:100vh;
}
svg{
  height:100%;
  width:100%
}

Answer 2

相关问题

How can I make an svg scale with its parent container?

How to resize an image to fit in the browser window?

没有用，但是提出的方法的组合解决了这个问题。

1）将$(function () { $(".select2").change(function(){ toastr.success("Great Choice"); }); });标记中的width="A" height="B"替换为<svg ...>。

现在它几乎可以工作但不太准确，因为浏览器会自动将viewBox="0 0 A B" max-width="100%" width="auto" max-height="100vh" height="auto"添加到margin: 8的样式（即使body文件中没有<body>标记）。所以

2）添加.html

Answer 3

这可能会有所帮助。我使用这个CSS来适应宽度和高度的背景图像，并相应地缩小到浏览器。

html { 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: relative;
}

您可以在DIV中设置SVG并为其添加一个类，然后您只需使用上面的CSS来缩放DIV的内容。

如何使svg符合html的宽度和高度？

3 个答案: