画像はiPhone 5でデバイスの幅を超えることはできません

Question

私は画像の幅を200％に設定しているのに対し、iPhone 5の画像はデバイスの幅を超えることができないのです。 Chromeのデベロッパーモードでは期待したように見えますが、実際のデバイスでは表示されません。私は他のデバイスをテストしていませんが、320pxより小さい他のデバイスでも同じ問題があると思いますか？

---

This is the screenshot from iPhone 5

And these are screenshots from Chrome's dev mode

ここでは、関連するHTMLは

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=1"> 

<div class="landing"> 
    <div class="landing-container"> 
     <div class="landing-title-container" > 
      <h1 class="landing-title">Let's Make Impacts</h1> 
     </div> 
     <div class="landing-img-container"> 
      <img class="landing-img landing-front" src="/materials/landing.png" alt="landing"> 
     </div> 
    </div> 
</div> 

はここでは関係SASSは

.landing { 
    width: 100%; 
    height: 120vw; 

    .landing-container { 
     width: 100%; 
     height: 100%; 
    } 

    .landing-img-container { 
     height: 120vh; 
     width: 100%; 
     position: absolute; 
     z-index: -1; 
     overflow: hidden !important;  
     display: flex; 
     justify-content: center; 
     align-items: center; 

     .landing-img { 
      width: 200%; 
      height: auto; 
      display: block; 
      margin: auto;     
     } 
} 

スニペットですスニペットです

これらのスニペットが十分に徹底的でない場合は、Chromeの開発モードで自分のコードを自由にチェックしてください。

ありがとうございます！

Answer 1

スケーリングに影響する画像を中央に配置するために、画像の親にflexboxを使用しています。 flex-shrinkの既定のプロパティは、画像がコンテナよりも広くならないようにします。

flex-shrink: 0を画像に追加します。これにより、画像のサイズを制限することなく、センタリングが行われます。

画像にもmax-width: 100%;が適用されていることがよくありますが、元に戻す必要があります。

.landing-img { 
    width: 200%; 
    height: auto; 
    display: block; 
    margin: auto; 
    flex-shrink: 0; 
    max-width: none;    
} 

ドキュメント：ご返信用https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink