svg - 用背景图像和全宽填充 SVG 路径元素

Question

有人可以帮我解决这个问题：我能够添加带有填充图像的 SVG，但纵横比/缩放不能按预期工作。我尝试了一些解决方案，但都没有奏效。请帮忙。链接如下： https ://park-maksimir.hr/testnasve/

Answer 1

enter code here<style>
.aspectRatioSizer {
  display: grid;
}
.aspectRatioSizer > * {
  grid-area: 1 / 1 / 2 / 2;
}
</style>

<div class="aspectRatioSizer">
  <svg viewBox="0 0 7 2"></svg>
  <div>
    Content goes here
  </div>
</div>

那里发生了两件事：

• 一旦你给出一个 viewBox，它就会变成全宽，但只有 viewBox 值中隐含的纵横比一样高。viewBox 的值本质上是 SVG 内部坐标系的“上、左、宽、高”，但是当它没有自己的高度时，它具有调整元素本身大小的副作用。这也是用于将父元素“推入”纵横比的方法。如果必须，父母仍然会拉伸（例如，内容多于适合），这很好。
• CSS Grid 用于将两个元素放在彼此的顶部，并且源顺序将内容保持在顶部。