全宽背景图像3

Question

我能够创建在引导3.一种示例的全宽图像背景，可以如下所示：

body, 
 
html { 
 
    height: 100%; 
 
} 
 
body { 
 
    padding-top: 50px; 
 
} 
 
.full { 
 
    padding: 0 !important; 
 
    margin: 0 auto !important; 
 
    background-size: cover; 
 
    overflow: hidden; 
 
} 
 
.wide { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.logo { 
 
    color: #fff; 
 
    font-weight: 800; 
 
    font-size: 14pt; 
 
    padding: 25px; 
 
    text-align: center; 
 
} 
 
.line { 
 
    padding-top: 20px; 
 
    white-space: no-wrap; 
 
    overflow: hidden; 
 
    text-align: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Brand</a> 
 
    </div> 
 
    <div class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a> 
 
     </li> 
 
     <li><a href="#about">About</a> 
 
     </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Username</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <!--/.nav-collapse --> 
 
    </div> 
 
</div> 
 

 
<div class="full" style="background-image:url('https://c.stocksy.com/a/RcN300/z0/805779.jpg');"> 
 
    <div class="container"> 
 
    <div class="row clearfix"> 
 
     <div style="padding: 0 0 200px 0;"> 
 
     <div class="col-xs-5 line"> 
 
      <hr> 
 
     </div> 
 
     <div class="col-xs-2 logo text-center">Logo</div> 
 
     <div class="col-xs-5 line"> 
 
      <hr> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="text-center"> 
 
    <h1>Content</h1> 
 
    </div> 
 
</div> 
 
<!-- /.container -->

页面显示当对于Desktop，图像显示为覆盖整个区域。 当页面显示移动时，所有图像现在显示为发生缩小。

这是什么行为？如何让移动视图中的图像与桌面版本中显示的图像类似？

这是否与响应成像有关？

由于 /比拉尔

Answer 1

这通过cover标准行为引起的。如果您将桌面浏览器调整为像大小的肖像，您会明白我的意思。

一个选择是使用媒体查询，因此当在纵向模式下查看页面时，它看起来会好一些。

body, 
 
html { 
 
    height: 100%; 
 
} 
 
body { 
 
    padding-top: 50px; 
 
} 
 
.full { 
 
    padding: 0 !important; 
 
    margin: 0 auto !important; 
 
    background-size: cover; 
 
    overflow: hidden; 
 
} 
 
.wide { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.logo { 
 
    color: #fff; 
 
    font-weight: 800; 
 
    font-size: 14pt; 
 
    padding: 25px; 
 
    text-align: center; 
 
} 
 
.line { 
 
    padding-top: 20px; 
 
    white-space: no-wrap; 
 
    overflow: hidden; 
 
    text-align: center; 
 
} 
 
@media (orientation: portrait) { 
 
    .full { 
 
    background-size: 200% auto; 
 
    background-position: top right; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Brand</a> 
 
    </div> 
 
    <div class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a> 
 
     </li> 
 
     <li><a href="#about">About</a> 
 
     </li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Username</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <!--/.nav-collapse --> 
 
    </div> 
 
</div> 
 

 
<div class="full" style="background-image:url('https://c.stocksy.com/a/RcN300/z0/805779.jpg');"> 
 
    <div class="container"> 
 
    <div class="row clearfix"> 
 
     <div style="padding: 0 0 400px 0;"> 
 
     <div class="col-xs-5 line"> 
 
      <hr> 
 
     </div> 
 
     <div class="col-xs-2 logo text-center">Logo</div> 
 
     <div class="col-xs-5 line"> 
 
      <hr> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="text-center"> 
 
    <h1>Content</h1> 
 
    </div> 
 
</div> 
 
<!-- /.container -->