不調整大小在移動/ 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上的高度可能是問題，您是否嘗試過使用媒體查詢或可能的背景大小調整移動設備：在手機上是否包含？