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背景图片不响应

回答

相关问题