html - 转到移动设备时，Bootstrap 横幅不会调整大小

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/