Question

我有一个svg文件，我用作background-image。现在我想把它伸展到窗户的大小。 应忽略所有宽高比，因此后台SVG既不应使用background-size: cover也不应使用contain。

现在我有这个代码，但它不起作用。

html {
  background: url("image.svg") center no-repeat;
  width: 100%;
  height: 100%;
}

有人有任何想法吗？

Answer 1

如果您不关心宽高比，可以简单地将preserveAspectRatio="none"添加到SVG。并在CSS中设置background-size: 100% 100%;。

示例：

html {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z'%3E%3C/path%3E%3C/svg%3E") center / 100% 100% no-repeat;
  height: 100%;
}

忽略SVG纵横比并拉伸到100％窗口大小

1 个答案: