Html 如何在CSS中垂直和水平居中放置方形SVG，以便在视口中仅显示图像，而不管其尺寸如何

我正在尝试使用SVG并在移动和桌面浏览器上显示它。SVG是方形的，因此如果我尝试使用

contain

将其垂直和水平居中，它将在中心显示方形图像。那不是我想要的

我想要的是将它放在图像的中心，然后放大它，这样你所看到的只是图像的一部分，其余部分被视口剪裁。我不能上传图片给你看，但这张图应该有助于澄清

移动：

  ┌┄┄┄┄╔═══════╗┄┄┄┄┐
  ┆    ║       ║    ┆
  ┆    ║       ║    ┆
  ┆    ║       ║    ┆
  ┆    ║       ║    ┆
  ┆    ║       ║    ┆
  ┆    ║       ║    ┆
  └┄┄┄┄╚═══════╝┄┄┄┄┘
        ^           ^
        |           |
  viewport          image

                image
                |
                v
       ┌┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┐
       ╔═════════════════╗
       ║                 ║    
       ║                 ║    
       ║                 ║    
       ║                 ║<-- viewport
       ║                 ║    
       ║                 ║    
       ╚═════════════════╝
       └┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┘

桌面：

  ┌┄┄┄┄╔═══════╗┄┄┄┄┐
  ┆    ║       ║    ┆
  ┆    ║       ║    ┆
  ┆    ║       ║    ┆
  ┆    ║       ║    ┆
  ┆    ║       ║    ┆
  ┆    ║       ║    ┆
  └┄┄┄┄╚═══════╝┄┄┄┄┘
        ^           ^
        |           |
  viewport          image

                image
                |
                v
       ┌┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┐
       ╔═════════════════╗
       ║                 ║    
       ║                 ║    
       ║                 ║    
       ║                 ║<-- viewport
       ║                 ║    
       ║                 ║    
       ╚═════════════════╝
       └┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┘

图像
|
v
┌┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┐
╔═════════════════╗
║                 ║    
║                 ║    
║                 ║    
║                 ║
…应该这样做。

在上面的速记中，
/cover
是

background-size: cover;

看到它工作了吗


div{
背景：url（'https://placeholder.pics/svg/300'）中心/盖；
}
.一{
高度：200px；
宽度：50%；
}
.二{
高度：100px；
宽度：100%；
}
.三{
高度：400px；
宽度：100px；
}
.4{
高度：200px；
宽度：200px；
}

如果SVG是内联HTML，即不能使用
background:url（…）
，该怎么办。使用
background:url（'data:image/svg+xml；utf8，…）中心/封面
但是，最好使用在线工具在base64中对
进行编码。（即：）。显然，如果您这样做，您需要将编码从
utf8
更改为
base64
。有很多网站，你只需粘贴你的
代码，它们会给你准确的
背景图像
，作为回报。平心而论，
utf8
如果你的
不包含分隔符，那么它的效果非常好。如果使用单引号作为分隔符，就像我上面所做的那样，请确保
只包含双引号，反之亦然。