Question

我正在尝试在100vh全屏容器中获取与object-fit等效的SVG图像。据我所知，我需要使用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用户单位的坐标系。然后，此坐标系是视口，用于使用隐式<image>来调整preserveAspectRatio="xMidYMid meet"的大小。如果您感到困惑：是的，那就是问题。

相反，只需调整<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>

SVG图片未与100vh视口中的“对象适合”等效对齐

1 个答案: