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

Bootstrap 3 中的全角背景图片

Full-width background image in Bootstrap 3

css

twitter-bootstrap-3

responsive-images