Jumbotron背景圖片不響應

當我在桌面上查看頁面時，它工作正常，圖像響應迅速。當我直接在iPhone上查看頁面時，圖像不正確。Jumbotron背景圖片不響應

的Index.html

<header> 
    <div class="jumbotron"> 
     <div class="container" id="maincontent" tabindex="-1"> 
     <div class="row"> 
      <div class="col-lg-12"> 
       <div class="intro-text"> 
        <h1 class="name">Headline</h1> 
        <hr class="star-light"> 
        <span class="skills">Sub-header</span> 
       </div> 
      </div> 
     </div> 
    </div> 
    </div> 
</header>

的style.css（freelance.css）

.jumbotron { 
    background: url("http://vlastapolach.cz/img/expecto.jpg") no-repeat fixed; 
    background-size: cover; 
    background-position: top center; 
    height: auto; 
}

全部代碼是在這裏：https://github.com/vlastapolach/portfolio

我嘗試了這些，但它在桌面上無法正常工作。

background-size: contain; 
background-size: auto; 
background-size: 100% 100%;

來源

2017-05-05 Vlasta Po

嘗試包括寬度：100％; – jmag

看看[文檔]（https://v4-alpha.getbootstrap.com/content/images/#responsive-images）。 '''Bootstrap中的圖像與.img-fluid相關。最大寬度：100％;和高度：自動;被應用到圖像，以便它與父元素的比例尺' – Dwhitz

@jmag我加了他們兩個'最大寬度：100％; 寬度：100％;'但同樣的結果 - 在個人電腦上它是響應式的，但不是在移動設備上。 –

簡寫語法將背景大小保持爲固定。我已刪除固定。

.jumbotron { 
 
    background: url("http://vlastapolach.cz/img/expecto.jpg") no-repeat; 
 
    background-size: cover; 
 
    background-position: top center; 
 
    height: auto; 
 
    width:100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <header> 
 
    <div class="jumbotron"> 
 
     <div class="container" id="maincontent" tabindex="-1"> 
 
     <div class="row"> 
 
      <div class="col-lg-12"> 
 
       <div class="intro-text"> 
 
        <h1 class="name">Headline</h1> 
 
        <hr class="star-light"> 
 
        <span class="skills">Sub-header</span> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</header>

來源

2017-05-05 15:27:20 jmag

謝謝！刪除「固定」工作。請，任何想法如何使它背景是在同一個地方和下一節翻轉它..因爲它與「固定」..但在電話上工作..？ –

嘗試使用媒體查詢。媒體查詢將在達到特定屏幕尺寸後激活CSS屬性。 – jmag

好主意，謝謝！它已經完成，現在它在個人電腦和手機上也很棒。非常感謝。解決。 –

Jumbotron背景圖片不響應

回答

相關問題