转到移动设备时，引导横幅不会调整大小

Question

我有一个 boostrap 网站，这是我网站上的顶部横幅。基本上有一个在屏幕上 100% 的背景图像。我在左侧有文字和一个按钮。 - 在桌面上看起来不错，但是当我下到平板电脑时，文字会出现在图像右侧的人脸上 - 在手机上它不显示人脸

背景图片没有缩放。我如何让它做到这一点？

平板截图：http://www.onvia.com/sites/default/files/tabelts-banner.jpg

手机截图：http://www.onvia.com/sites/default/files/mobile-banner.jpg

引导： http://www.bootply.com/JeOg9KYYnY

HTML：

    <div class="intro-header">
    <div class="container">

        <div class="row">
            <div class="col-lg-7">
                <div class="intro-message">
                    <h1>Adobe Exchange</h1><br>
                    <p class="subtitle">Search the most comprehensive online library of video tutorials, code samples to help you quickly learn how to create the web.</p>
                    <p class="intro-divider"></p>
                     <a href="#register" class="btn btn-primary btn-lg"><span>Register for a Free Account</span></a>

                </div>
            </div>
        </div>

    </div>
    <!-- /.container -->

</div>
<!-- /.intro-header -->

CSS：

    .intro-header {
    padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
    padding-bottom: 50px;
    text-align: left;
    color: #f8f8f8;
    background: url(http://www.onvia.com/sites/default/files/example-bg.jpg) no-repeat center center;
    background-size: cover;
}

Answer 1

这里的问题是背景图片居中，所以在移动端，只有图片的中心是可见的。

一种可能的方法是为手机/平板电脑屏幕尺寸编写媒体查询，并将背景属性更改为

.intro-header {
    background: url(URL-HERE) no-repeat center right;
}

这将使背景图像右对齐。

如果您想对定位进行更有限的控制，您可能必须摆脱背景属性，并使用其他一些技巧。看看这篇关于放置背景图像的不同方法的 CSS-Tricks 文章。本文重点介绍整页背景，但您应该能够将所用的方法应用于您的案例。

https://css-tricks.com/perfect-full-page-background-image/

Answer 2

尝试将其更改为：

background-size:100% auto;

根据Twitter Bootstrap Responsive Background-Image inside Div