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

Question

我有为什么iPhone 5上的图像不能超过其设备宽度，而我将图像的宽度设置为200%。它在Chrome的开发模式下看起来与我预期的那样，但在真实设备上却没有。虽然我没有测试过其他设备，但我想其他宽度小于 320px 的设备也会遇到同样的问题吗？

---

这是iPhone 5的屏幕截图

这些是Chrome开发模式的屏幕截图

这是相关的 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

您在图像的父级上使用弹性框，以便将图像居中，这将影响缩放。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