モバイル/ 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の高さはおそらく問題です。あなたはメディアクエリや携帯電話のサイズに合わせて調整しようとしましたか？