Question

我已经使用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;
 }

Answer 1

还有一个特定于图像的类。

<img class="img-responsive">

你可以试试这个。如果这是你的回答，我不知道。

文章链接：http://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp

Bootstrap背景图像没有在iPhone上调整大小

1 个答案: