图像不能超过iPhone 5上的设备宽度

我的是，为什么iPhone 5上的图像不能超过其设备宽度，而我设置我的图像的宽度为200％。它看起来像我在Chrome的开发模式，但不是在真正的设备上。虽然我还没有测试过其他设备，但我猜其他宽度小于320像素的设备会有同样的问题吗？图像不能超过iPhone 5上的设备宽度

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>

以下是有关萨斯片断

.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的开发模式检查我的代码。

感谢您的帮助！

来源

2017-07-13 vince19972

您在图像的父级上使用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

来源

2017-07-13 03:52:41

感谢您的答复。真的帮助了我！但添加'flex-shrink'不适用于我的案例，所以我也添加了'flex-basis'，问题解决了！ – vince19972

图像不能超过iPhone 5上的设备宽度

回答

相关问题