Полная ширина фонового изображения в Bootstrap 3

Question

Я могу создать полную ширину фона изображения в Bootstrap 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 -->

Когда страница отображается для рабочего стола изображение отображается широко, охватывая всю область. Когда страница отображается на мобильном устройстве, все изображение теперь отображается так, как если бы произошло уменьшение.

Что это такое? Как сделать изображение в мобильном режиме похожим на изображение, отображаемое в настольной версии?

Это связано с отзывчивой визуализацией?

Благодаря /Билал

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