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

Demo