Question

我正在努力解决;有响应的div，具有响应的背景图像。随着所述响应div的重新调整大小，内容低于内容。

一切都有回应，但问题是，以下内容仍然是阅读高度：CSS。我需要以下内容来提升所提及的当前响应div与背景图像。我想用twitter bootstrap来解决问题。我试图不调用媒体查询只是为了覆盖视口res下的高度。

    <div class="row">
        <div class="bg"></div>
    </div>

    content content content content content content content content content content content content content content content content content content content content content content content content content content

.bg {
    background: url('http://i.stack.imgur.com/jGlzr.png');
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain; // doesn't matter if 100% auto or cover
    height: 300px;  
}

使用实际代码更新：

基于推荐的解决方案，我尝试过实施，反思下面的代码：没有用。另外，认为在.row中包装页脚和其他元素并在一个元素上声明这么多类并不是最佳的。但无论如何都没有用，所以无所谓。

        <div class="container-fluid">
        <section class="row">
        <section class="col-xs-12 nonslidecont embed-responsive embed-responsive-16by9">




        </section>
        </section>

        <div class="row">
        <footer class="col-xs-12">
            Lorem ipsum dolor sit amet, alterum detraxit senserit duo no, vel eu quas minimum phaedrum. Dolorum iudicabit at nam. Docendi gloriatur inciderint pri ei, ea iuvaret facilisis sea, aliquam mediocrem eam no. Numquam probatus singulis id qui, te voluptatum contentiones has. Ei perfecto adipiscing sit. No vis dolor ignota ullamcorper. Ei dico prima qui, mucius propriae perpetua ad his, adolescens consetetur te sea. Sea an delectus efficiantur, et dicat mnesarchum usu. Graeci antiopam no sea, qui ei esse exerci detracto.
        </footer>
    </div>
</div>

CSS：

.nonslidecont { 
    width: 100%;
    height: 455px;
    background-image:url("../images/yooooo.jpg");
    background-repeat: no-repeat;
    background-size: contain;
}

Answer 1

Bootstrap以两种宽高比（16：9和4：3）提供此类功能。如果适合，你可以简单地申请适当的课程：

.embed-responsive.embed-responsive-2by1 {
    padding-bottom: 50%;
}

<强> Demo

如果没有，您需要根据该模型创建自己的类：

{{1}}

http://getbootstrap.com/components/#responsive-embed

最后一个选项是将您的背景图片用作“吊具”，并使用绝对定位的元素覆盖您的内容。的 Demo

Answer 2

我只是采用旧时尚的方式......虽然试图避免。

    @media (max-width:600px) and (min-width:20px) {
     footer {
        margin-top:-250px;;
    }
 }

div与响应背景img拉起下面的内容

2 个答案: