引導橫幅在移動時不會調整大小

Question

我有一個boostrap網站，這是我網站上的最高橫幅。 基本上，背景圖片會在整個屏幕上顯示為100％。 我在左側有文字和按鈕。 -在台式機上看起來不錯，但是當我平板電腦寫字時，字詞會在圖片右手的人臉上划過-在移動設備上，它不會顯示人臉

背景圖像無法縮放。 我如何做到這一點？

平板電腦屏幕截圖： http : //www.onvia.com/sites/default/files/tabelts-banner.jpg

手機屏幕截圖： http ： //www.onvia.com/sites/default/files/mobile-banner.jpg

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

這將使背景圖像右對齊。

如果要對定位進行更多的有限控制，則可能必須擺脫background屬性，並使用其他技巧。 看看這篇CSS-Tricks文章，介紹一些用於放置背景圖像的不同方法。 本文着重於整頁背景，但是您應該能夠將所使用的方法應用於案例。

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

Answer 2

嘗試將其更改為：

background-size:100% auto;

根據Div內的Twitter Bootstrap響應式背景圖片