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

Question

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

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

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

Answer 1

<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>

我会做些什么来将页脚放在底部，使用 flexbox (都2015年了，大家应该支持flexbox...)，

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

.content {
  flex: 1;
}

然后制作padding hack使页脚响应。

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;
}

演示 fiddle