SVG 图像未与 100vh 视口中的等效'object-fit'对齐

Question

我试图让SVG图像相当于100vh全屏容器中的object-fit。 从我可以收集的信息中，我需要使用preserveAspectRatio="xMidYMid slice"属性并设置width="100%" height="100%"

我似乎无法让它工作？当我玩弄它时，要么在容器底部显示一大块空白，要么当图像填满视口时，视口就会变得比 100vh 大得多？

请注意，我不能使用 CSS 背景图像属性，因为它是我正在构建的更广泛的 SVG/Javascript 动画的一部分。

代码笔：https://codepen.io/emilychews/pen/YJYrEa

有谁知道这里出了什么问题以及解决方案是什么？

提前感谢您的任何帮助/想法。

body {
margin: 0;
padding: 0;
display: flex;
width: 100%;
height: 100vh;
justify-content: center;
align-items: center;
}
#section-1, .background-clipped {
width: 100%;
height: 100%;
}

<section id="section-1">
<div class="background-clipped background-clipped-1">
<svg id="home-image-1" viewbox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
<image x="0" y="0" xlink:href="https://i.postimg.cc/9XdQKYF1/dimon-blr-309444-unsplash.jpg" width="100%" height="100%" />
</svg>
</div>
</section>

Answer 1

有多种大小调整机制在起作用;一种用于<svg>元素，一种用于<image>元素。

您为<svg>元素设置的那个并没有真正的帮助。viewBox属性适合容器内 100 x 100 个用户单位的坐标系。然后，此坐标系是使用隐式preserveAspectRatio="xMidYMid meet"调整<image>大小的视口。如果您发现这令人困惑：是的，这就是问题所在。

相反，只需调整<svg>元素的大小即可填充容器。取下viewBox，将width和height设置为 100%。如果没有viewBox，preserveAspectRatio对<svg>元素也没有影响。

现在，只有图像的大小调整机制(如图preserveAspectRatio所述，将 nimage 调整到视口的 100% 宽度和高度中(才会生效并按您希望的方式工作。

一般说明：在您的<image>中使用的 JPG 具有固有的纵横比。因此，preserveAspectRatio总是会产生影响。<svg>元素没有。只有viewBox才有。并且是该属性的工作。

body {
margin: 0;
padding: 0;
display: flex;
width: 100%;
height: 100vh;
justify-content: center;
align-items: center;
}
#section-1, .background-clipped {
width: 100%;
height: 100%;
}

<section id="section-1">
<div class="background-clipped background-clipped-1">
<svg id="home-image-1" width="100%" height="100%">
<image xlink:href="https://i.postimg.cc/9XdQKYF1/dimon-blr-309444-unsplash.jpg"
x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid slice"/>
</svg>
</div>
</section>