我正在尝试获取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>或作为<body>的background-image：
body {
background: url('https://placeholder.pics/svg/300') center /cover;
margin: 0;
min-height: 100vh;
}