缩放居中 CSS-background SVG-image 与视口成比例而不裁剪

Question

我想以这种方式显示 SVG 圆（它在 CSS 背景中）：它应该缩放到可用的 space 视口而不被裁剪。而且，它也应该在视口中水平和垂直居中。

到目前为止，这是我的代码：

div {
  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500' preserveAspectRatio='xMidYMid meet' style='position: absolute; left: 0; top: 0; width: 100%25;'%3E%3Ccircle cx='250' cy='250 ' r='249' style='stroke: %23000000; fill:none;'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  height: 99vh;
  width: 99vh;
}

<body>
  <div></div>
</body>

不幸的是，它没有居中。

Answer 1

它以 div 为中心，但高度和宽度均以 vh 单位指定，使 div 成为不拉伸视口宽度的正方形.将宽度声明改为使用 vw。

div {
  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500' preserveAspectRatio='xMidYMid meet' style='position: absolute; left: 0; top: 0; width: 100%25;'%3E%3Ccircle cx='250' cy='250 ' r='249' style='stroke: %23000000; fill:none;'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  height: 99vh;
  width: 99vw;
}

<body>
  <div></div>
</body>

缩放居中 CSS-background SVG-image 与视口成比例而不裁剪

Scaling centered CSS-background SVG-image proportionally to viewport without cropping

css

svg

background-image