背景图像无法在手机/iPhone 上调整大小

Question

我有一个包含视差滚动的大图像的页面。

HTML：

<section class="parallax-top">
    <div class="caption">
    <h1><img src="../images/mainlogo.png" alt="Culture Smart!"></h1>
    <h2>Culture Smart! guides begin where other travel books end.</h2>
    <p>Our guides emphasize the people, not places. Written for the inquisitive traveler who wants more than information on hotels and sightseeing, they offer an insight into the rich human dimension of travel. Navigate your way abroad with over 100 country guides.</p>
    <p><a class="btn btn-primary btn-lg" href="destinations.php" role="button">Full list</a></p>
    </div>
</section>

<section class="box">
    <span class="border">
            <h2>About Culture Smart!</h2>
            <h4>The Essential Guide to Customs &amp; Culture</h4>
            <p>Culture Smart! provides essential information on attitudes, beliefs and behaviour in over 100 different countries.</p>
            <p><a class="btn btn-primary btn-lg" href="whatiscs.php" role="button">Learn more</a></p>
        </span>
</section>

<section class="parallax-middle">
    <div class="caption-middle">
        <span class="border-middle">
            <h2>News &amp; Promotions</h2>
            <h4>Find out what is going on around the world</h4>
            <p><a class="btn btn-primary btn-lg" href="news.php" role="button">Latest</a></p>
        </span>
    </div>
</section>

<section class="box">
    <span class="border">
            <h2>Our Authors</h2>
            <p>Find out their stories and experiences and how they can help enrich your travels.</p>
            <p><a class="btn btn-primary btn-lg" href="authors.php" role="button">About them</a></p>
        </span>
</section>

<section class="parallax-bottom">
    <div class="caption-bottom">
        <span class="border-bottom">
            <h2>We would love to hear from you</h2>
            <h4>Idea for the next book, let us know what you think of Culture Smart.</h4>
            <p><a class="btn btn-primary btn-lg" href="contact.php" role="button">Get in touch</a></p>
        </span>
    </div>
</section>

CSS：

.parallax-top {
  background-image: url("../images/hero3.jpg");  
  height: 1200px;
  background-attachment: fixed;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.main .caption {  
    position: absolute;
    left: 0;
    top: 40%;
    width: 100%;
    text-align: center;
    color: white;
    background-color: black;
    opacity: 0.75;
    height: auto;
    padding: 0;
}

.main .caption h1 {
  margin-top: 0px;
}

.main .caption p {
  width: 80%;
  margin: auto;
  margin-bottom: 10px;
}


.parallax-middle {
  background-image: url("../images/hero1.jpg"); 
  height: 1200px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.caption-middle {  
    position: relative;
    left: 0;
    top: 40%;
    width: 100%;
    text-align: center;
    color: white;
    font-size: 20px;
    background-color: black;
    opacity: 0.75;
    height: auto;
    padding: 1%;
}

.parallax-bottom {
  background-image: url("../images/hero2.jpg"); 
  height: 1200px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.caption-bottom {  
    position: relative;
    left: 0;
    top: 40%;
    width: 100%;
    text-align: center;
    color: white;
     background-color: black;
    opacity: 0.75;
    padding: 1%;
    height: auto;
}

当它显示在移动设备上时，图像会被放大，所以我看不到它们是什么。更改为“背景附件：滚动；”解决了这个问题，但我失去了电脑上的视差效果。有没有办法在手机上自动调整背景图像的大小？我不介意在移动设备上失去视差效果

Answer 1

您的 div 的高度可能是问题所在，您是否尝试过通过媒体查询或移动设备上的 background-size:contain 调整移动设备的高度？