Html 如何按比例缩放SVG背景图像，使其始终为页脚div的全宽？

在HTML和CSS中，我很难让图像按我希望的方式缩放。希望有可能做到这一点…我正在开发一个由页眉、主内容和页脚组成的站点。所有这三个div都属于主包装div。没有一个div绝对定位或固定在浏览器窗口上。在页脚分区中，我尝试将SVG矢量图像设置为背景，因为我还将在页脚分区中插入文本。默认情况下，SVG图像为800 x 240px，但由于SVG的大小可以无限调整，因此它们将放大。我希望这个SVG图像按比例拉伸页脚div的宽度。例如，当浏览器缩小到300px宽时，图像的高度将为90px。如果浏览器被拉伸到1200px宽，图像需要缩放到360px高。SVG应始终为浏览器宽度的100%，并且其高度应按比例调整

我希望页脚div位于浏览器窗口的最底部，这样背景图像下方就没有空白。但是，我不想将footer div设置为固定在浏览器窗口的底部。我想页脚后面的主要内容div页滚动。因此，在较长的网页文章中，页脚div将不可见，直到页面向下滚动一点，然后滚动到视图中

---

非常感谢你的帮助！如果需要，我可以提供更多信息。仍在学习CSS和HTML！：

首先将SVG设置为按比例缩放：

<svg preserveAspectRatio="xMinYMin">
</svg>

---

通常，要缩放SVG背景图像，您需要设置一个viewbox，否则PreserveSpectRatio将不起作用：

<svg
   viewBox = "0 0 90 70" 
   preserveAspectRatio="none"
   ...

然后使页脚响应

footer {
    position: relative;
    height: 0;
    padding-top: 30%; /* 240 divided by 800 and multiplied by 100 */
    text-align: center;
}

.footer-inside {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: red url(http://ohdoylerules.com/content/images/css3.svg) no-repeat center center;
    background-size: contain;
}

---

演示

要使页脚保持在页面底部，搜索粘性页脚，这是一个常见问题。

.logo{
    background:transparent url(images/matheboss-logo-w.svg) center center no-repeat;
    display:block;
    background-size:contain;
    height:50px;
    width:50px
}

<header>This is out header</header>
<main class="content">This is my content</main>
<footer>
    <div class="footer-inside">
    And here goes footer with background image
    </div>
</footer>

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.content {
  flex: 1;
}

footer {
    position: relative;
    height: 0;
    padding-top: 30%; /* 240 divided by 800 and multiplied by 100 */
    text-align: center;
}

.footer-inside {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: red url(http://ohdoylerules.com/content/images/css3.svg) no-repeat center center;
    background-size: contain;
}