用背景图像和全宽填充 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 用于将两个元素放在彼此的顶部，并且源顺序将内容保持在顶部。