SVG 图像未与 100vh 视口中的“object-fit”等价物对齐

Question

我试图让 SVG 图像在 100vh 全屏容器内等效于 object-fit。据我所知，我需要使用preserveAspectRatio="xMidYMid slice" 属性并设置width="100%" height="100%"

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

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

Codepen：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>