当我在桌面上查看页面时,它工作正常并且图像响应迅速。当我直接在 iPhone 上查看页面时,图像不正确。
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%;
最佳答案
速记语法将 background-size 固定。我已经删除了固定的。
.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>
关于html - 超大屏幕背景图片没有响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43808272/