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

Question

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

---

This is the screenshot from iPhone 5

And these are screenshots from Chrome's dev mode

这里是相关的html sn-p

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

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

---

如果这些 sn-ps 不够彻底，请随时使用 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