Question

我有一段非常糟糕的时间让图片按照HTML & CSS的方式缩放。希望有可能这样做......我正在开发一个由header, main content div and footer div组成的网站。所有这三个div都属于一个主包装div。没有任何div绝对定位或固定到浏览器窗口。在页脚div中，我尝试将SVG矢量图像设置为背景，因为我还将文本插入到此页脚div中。默认情况下，SVG图片为800 x 240px，但由于SVG可以无限调整大小，因此它们会向上扩展。我希望这个SVG图像按比例拉伸页脚div的宽度。因此，例如，当浏览器缩小到300px宽时，图像将为90px高。如果浏览器拉伸到1200px宽，则图片需要缩放到360px高。 SVG应始终为浏览器宽度的100%，并且其高度应按比例调整。

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

非常感谢您的帮助！如果需要，我可以提供更多信息。还在学习CSS＆amp; HTML！：）

Answer 1

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

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

然后将其设置为页脚的背景，并使用cover：

说明背景大小

   .footer {
     background: #000 url(image.svg) top left no-repeat;
     background-size: cover;
   }

Answer 2

一般来说，要缩放SVG背景图像，需要设置一个视图框，否则preserveAspectRatio将不起作用：

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

然后在你的CSS中例如：

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

Answer 3

<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

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

3 个答案: