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