Bootstrap 3中的全宽背景图像

Question

我可以在Bootstrap 3中创建一个全宽的图像背景。这里可以显示一个例子：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

当桌面显示页面时，图像显示为覆盖整个区域。 当页面显示为移动设备时，现在所有图像都显示为发生了缩小。

这种行为是什么？如何使移动视图中的图像看起来与桌面版中显示的图像类似？

这与响应式成像有关吗？

由于 /比拉尔

Answer 1

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;