将居中的 CSS 背景 SVG 图像按比例缩放到视口而不进行裁剪答案

【问题标题】：Scaling centered CSS-background SVG-image proportionally to viewport without cropping将居中的 CSS 背景 SVG 图像按比例缩放到视口而不进行裁剪
【发布时间】：2021-01-22 09:53:46
【问题描述】：

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

这是我目前的代码：

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>

不幸的是，它没有居中。

【问题讨论】：

标签： css svg background-image

【解决方案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>

【讨论】：

如果我将您的代码放入一个干净的 HTML 文档并在 Firefox 中查看它，那么，如果视口宽度超过 ca. 1020 像素，圆圈不再缩放并失去居中（显示为左对齐）。在 Safari 和 Chrome 中它可以工作，但有恼人的滚动条可见，让您水平和垂直滚动几个像素......
它对我来说在 Firefox 中按预期工作。大多数浏览器默认为 body 元素添加边距，您需要将其删除以防止滚动条。
好的，谢谢！现在它也可以在 Firefox 中使用。在网络服务器上有一些激进的缓存。