使用 Bootstrap 移动响应的背景图像

Question

我尝试了 Bootstrap 的 .img-responsive 和其他选项，但我的移动设备上的背景图像仍然被炸毁和像素化。桌面浏览器上的移动视图很好，但在实际的移动设备上，图像是倾斜的。任何帮助表示赞赏。

HTML：

<div class="hero">
    <div class="landing">
      <div class="container">
        <div class="wrapper">
          <div class="row">
            <div class="col-md-8">
              <img src="/website_v2/img/headline-work-play-contactics.png" class="shadow-offset img-responsive">                
            </div> <!-- /.col -->
          </div> <!-- /.row -->
        </div> <!-- /.wrapper -->
      </div> <!-- /.container -->
    </div> <!-- /.landing -->
</div> <!-- /.hero -->

CSS：

.hero .landing {
  position: absolute;
  left:0;
  width: 100%;
  min-height: 100%;
  background: url(../img/hero-index.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  border-bottom-style: solid;
  border-bottom-color: #d3d3d3;
  border-bottom-width: 1px;
  -webkit-animation: fadein 1s; /* Safari and Chrome */
    -moz-animation: fadein 1s; /* Firefox */
    -ms-animation: fadein 1s; /* Internet Explorer */
    -o-animation: fadein 1s; /* Opera */
    animation: fadein 1s;
}

.container {
  margin-right: auto;
  margin-left: auto;
  min-width: 100%;
}

.hero .container {
  max-width: 100%;
  padding-top: 100px;
}

.hero .wrapper {
  width: 100%;
  height: 300px;
  margin: 0 auto;
  -webkit-animation: aniload .5s;
    -moz-animation: aniload .5s;
    -ms-animation: aniload .5s;
    -o-animation: aniload .5s;
    animation: aniload .5s;
}

.row {
  margin-right: -15px;
  margin-left: -15px;
}

感谢！

Answer 1

我认为你的网格系统有问题 这里col-md-8 用于平板电脑等中型设备。对于移动设备，您应该使用col-sm-12。我认为现在可以正常工作了。有关详细信息，请参阅引导网格系统http://getbootstrap.com/css/

<div class="col-md-8 col-sm-12">

</div>

在css中有

img {
    width:100%;
}

Answer 2

.img-responsive{
 height:auto; 
 width:100%
}

在移动媒体查询部分应用此代码