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

当它在移动设备上显示时，图像会被放大，所以我看不到它们是什么。更改为 "background-attachment: scroll;" 解决了问题，但我在计算机上失去了视差效果。有没有办法在移动设备上自动调整背景图片的大小？我不介意在手机上失去视差效果

Answer 1

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

mobile/iPhone 背景图片未调整大小

Background images not resizing on mobile/iPhone

background-image

image-resizing

parallax