1

我很难让图像按我想要的方式缩放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 和 HTML！:)

4

3 回答 3

0

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

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

然后将其设置为页脚的背景，并使用以下内容声明背景大小cover：

   .footer {
     background: #000 url(image.svg) top left no-repeat;
     background-size: cover;
   }
于 2012-10-30T14:54:39.677 回答
0

通常，要缩放 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
}
于 2015-05-12T06:52:48.970 回答
0 
<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;
}

然后进行填充黑客以使页脚响应。

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

演示小提琴

于 2015-05-12T07:09:57.600 回答