Bootstrap封面圖片不會在移動設備上調整大小

Question

我有以下封面圖片，在桌面上看起來很棒。 頭像在右側，因此當我在移動設備上查看頁面時，頭像被截斷了。

如何制作以便在移動時調整圖像大小？

這是我的bootply： http : //www.bootply.com/KVei4t3ABg

這是我的html：

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

        <div class="row">
            <div class="col-lg-7">
                <div class="intro-message">
                    <h1>Title</h1><br>
                    <p class="subtitle">Search the most comprehensive online library </p>
                    <p class="intro-divider"></p>
                     <a href="https://www.apple.com" class="btn btn-primary btn-lg">
                       Register for a Free Account
                     </a>
                </div>
            </div>
        </div>

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

這是我的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/exchange/img/background_test.jpg) no-repeat center center;
    background-size: cover;
}

Answer 1

您的背景圖片很寬，但相關部分很窄。 我會考慮剝離灰色背景，將其替換為CSS顏色，並始終將您的肖像設置為右邊緣。 考慮到割下的肩膀，無論如何這可能是一個好主意。

.intro-header {
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: left;
    color: #f8f8f8;
    background: url( ... ) no-repeat right center;
    background-size: contain;
    background-color: #ddd;
}

演示版