我已经使用Bootstrap创建了一个接近完成的网站。我遇到的问题是在桌面或Android设备上它看起来很棒并按计划工作。但是,在Iphone上,背景图像不会缩小以适合显示。该网站使用级联滚动。
www.mabmetalworks.com
我怀疑它与iphone是视网膜显示有什么关系?
请您查看下面的代码,并建议我如何纠正它以使用iPhone?
<div id="home" class="home">
<div class="text-vcenter">
<h1>MAB Metal Works</h1>
<h3 class = "H2">Your Local Steel Company</h3>
<a href="#about" class="btn btn-default btn-lg">Continue</a>
</div>
</div>
#home {
background: url(../images/main.jpg) no-repeat center center scroll;
display: table;
height: 100%;
position: relative;
width: 100%;
max-width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
答案 0 :(得分:0)
还有一个特定于图像的类。
<img class="img-responsive">
你可以试试这个。如果这是你的回答,我不知道。
文章链接:http://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp