我正在尝试使用SVG并将其显示在移动和桌面浏览器上。 SVG是方形的，所以如果我只是尝试使用contain垂直和水平居中，它将在中心显示方形图像。那不是我想要的。
我想要的是让它以图像为中心，然后放大图像，这样你所看到的就是图像的一部分，其余部分被视口剪切掉。我无法上传图片来向您展示，但此图纸应该有助于澄清。
移动：
┌┄┄┄┄╔═══════╗┄┄┄┄┐
┆ ║ ║ ┆
┆ ║ ║ ┆
┆ ║ ║ ┆
┆ ║ ║ ┆
┆ ║ ║ ┆
┆ ║ ║ ┆
└┄┄┄┄╚═══════╝┄┄┄┄┘
^ ^
| |
viewport image
桌面：
image
|
v
┌┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┐
╔═════════════════╗
║ ║
║ ║
║ ║
║ ║<-- viewport
║ ║
║ ║
╚═════════════════╝
└┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┘
我试过object-fit: cover但没有去。
yourSelector {
background: url('path/to/your/svg') center /cover;
}
......应该这样做。
在上面的简写中，/cover是简称
background-size: cover;
看它工作：
div {
background: url('https://placeholder.pics/svg/300') center /cover;
}
.one{
height: 200px;
width: 50%;
}
.two {
height: 100px;
width: 100%;
}
.three {
height: 400px;
width: 100px;
}
.four {
height: 200px;
width: 200px;
}<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>或者作为background-image的<body>：
body {
background: url('https://placeholder.pics/svg/300') center /cover;
margin: 0;
min-height: 100vh;
}