twitter-bootstrap - 拉伸(stretch) CSS 背景(仅更改宽度)

Question

我有一张图片(用作背景)，我想将其放在容器的底部。

我希望此图像保持其当前高度，但拉伸(stretch)至容器的宽度。

这是我已经拥有的:

background:url('images/poll-graph.svg') no-repeat center bottom;

HTML 看起来像这样:

<section id="sec-feature-polling">
    <div class="container">
        <h2>This is a heading</h2>
        <p class="subheading">This is a subheading</p>

    </div>
</section>

我尝试添加 background-size: 100% 但这会导致图像按比例缩放(高度增加)。

我正在使用 Bootstrap 4.0.0。

如有任何帮助，我们将不胜感激:-)

Answer 1

好吧，如果您能分享您的 HTML 结构，那将会很有帮助。

将 div 容器与 class 放在一起。我将上课成为 xyz。

现在在你的 CSS 中做这样的事情......

.xyz {
    background-image: url("paper.gif");
        background-repeat: no-repeat;
        max-width: 100%;
}

这将根据其中的内容更改 xyz 容器的高度。

出于某种原因，我不确定我们是否可以使用这一行

background:url('images/poll-graph.svg') no-repeat center bottom;

[更新] 根据您添加的 HTML 结构，我了解到您希望将图像放置在容器底部。

试试这个:

1. 关闭所有容器 div 类(因为您使用的是 Bootstrap 并且容器类添加了填充)
2. 既然你想让它在容器下面，那么在容器下面创建一个新的 div 类
3. 在该 div 类中，在该背景上添加您想要的内容

然后在你创建的新 div 的类上尝试这样的东西作为你的 css

background-image: url('../images/college-cover.jpeg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-height: 750px;