L'image ne peut pas dépasser la largeur de l'appareil sur l'iPhone 5

Question

J'ai c'est pourquoi les images sur l'iPhone 5 ne peuvent pas dépasser la largeur de son appareil, alors que j'ai défini la largeur de mes images à 200%. Il ressemble à ce que je pensais sur le mode de développement de Chrome, mais pas sur le vrai périphérique. Bien que je n'ai pas testé d'autres appareils, je suppose que d'autres avec une largeur inférieure à 320px auraient les mêmes problèmes?

---

This is the screenshot from iPhone 5

And these are screenshots from Chrome's dev mode

est ici les html pertinentes snippet

<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> 

est ici les SASS pertinentes snippet

.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;     
     } 
} 

---

N'hésitez pas à vérifier mon code avec le mode de développement de Chrome si ces extraits ne sont pas assez complets.

Merci pour votre aide !!

Answer 1

Vous utilisez flexbox sur le parent de l'image pour centrer l'image qui va affecter la mise à l'échelle. La propriété par défaut pour flex-shrink empêche l'image d'être plus large que le conteneur.

Ajouter flex-shrink: 0 à l'image. Cela permettra toujours au centrage d'avoir lieu mais sans limiter la taille de l'image.

Il est assez fréquent de voir max-width: 100%; appliqué à des images que vous devrez peut-être annuler.

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

Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink