html - 使用 Bootstrap 在移动设备上调整背景图像大小的问题

Question

我已经四处搜索了一段时间，试图找到一个可行的解决方案，但我尝试过的一切都一无所获。我对编码仍然非常陌生，并且已经使用 Bootstrap 构建了一个站点。无论我做什么，背景图像都无法在物理移动设备上正确呈现，它们在缩小浏览器的同时在我的笔记本电脑上完美缩放，但在 iPhone 上则不然。我已将我的代码放在下面，非常感谢任何和所有帮助!

{% block content %}  
<div class="bg">
    <div class="row"> 
        <div class="container-fluid">
            <div class="col-xs-6 col-md-4"></div>
            <div class="col-xs-6 col-md-4"></div>
            <div class="col-xs-6 col-md-4 text-center">
                <div class="copy">
                <div class="box">  
                <h2 class="heading">A Captain For Every Occasion</h2>
                    <p>Our fleet of licensed captains are here to help you every step of the way. From lessons to first time boat owners to a delivery down the coast or the great lakes, we've experienced it all before.  In 2015 our team of captains logged over 10,000 nautical miles spanning from Canada to the Bahamas. </p>
                    <p>Our captains hail from New York, Rhode Island, Maryland, and Florida, covering all the major ports along the east coast.</p>  
                <h3 class="heading text-center">Services Offered</h3>
                    <ul class="text-left">
                        <li><i>New boat deliveries</i>: did you just purchase a brand new or new to you boat and need a hand getting her back to her new home port? Our team will hop on board and make sure your new yacht makes it home safely.</li>
                        <li><i>Lessons</i>: are you entirely new to boating or have you just moved into a larger boat with more systems in it than you're used to? Let us show you the ropes and walk you through the boat, making sure you feel comfortable with her. We can teach you how to anchor, dock, &amp; trim the boat out properly. </li>
                        <li><i>Coastal deliveries</i>: our team is no stranger to the Florida pilgrimage from up north. We know both the ocean way and how to make it down via the ICW if the weather is not cooperating outside. </li>
                        <li><i>Daily trips</i>: do you plan on heading out for the day or an evening of dinner and drinks onboard your boat and want to partake in the party? Let one of our captains hop on board with you, so you can enjoy yourself.</li>
                    </ul>  
                </div>  
               </div>    
            </div>   
      </div>    
    </div> 
</div>
{% endblock %}

我的 CSS

.bg {
    font-family: "metricweb-light", sans-serif;
    font-size: 16px;
    background: url("../image/captain.jpg") center center no-repeat fixed;
    padding: -15px;
    margin: -15px;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    overflow: hidden;
}
.copy {
    padding-top: 50px;
    padding-bottom: 50px;
}
.box {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .6);
    min-width: 300px;    
}

Answer 1

如何尝试在 .bg 上添加一个高度，例如 300px，然后添加 background-position: 50% 50%;