背景图片移动响应引导程序

我试过Bootstrap的.img响应和其他选项，但我的移动设备上的背景图像仍然炸毁和像素化。桌面浏览器上的移动视图很好，但在实际的移动设备上，图像偏斜。任何帮助表示赞赏。背景图片移动响应引导程序

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

格拉西亚斯！

来源

2014-05-21 user3630106

图像的尺寸是多少？ –

@RyanHollingsworth - 背景图像是1620×1080. – user3630106

我觉得问题在网格系统这里col-md-8为介质装置等作为Tablet.For移动设备，你应该使用col-sm-12。我认为这将是做工精细now.For详细信息，请参阅引导电网系统http://getbootstrap.com/css/

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

</div>

在CSS中有

img { 
    width:100%; 
}

来源

2014-05-21 16:45:09

我不认为问题是HTML中的图像标记，而是CSS中的背景图像。虽然，我确实在HTML中为“.landing”div设置了一类“col-sm-12”，因为我认为这会修复它。但事实并非如此。所以，我认为我需要一个CSS“.hero .landing”的解决方案。 – user3630106

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

适用于手机验证码媒体查询部分

来源

2014-05-21 20:13:42 user3660278

背景图片移动响应引导程序

回答

相关问题