iOS 15.7端Flex布局图片垂直拉伸问题求助

问题背景 #

网站图片在iOS 15.7系统的iPhone上出现垂直拉伸异常，但在主流桌面浏览器、安卓浏览器及Xcode的iPhone模拟器中显示正常。已尝试调整align-items属性的不同值，问题仍未解决。

示例代码 #

HTML结构 #

<div class="content multi-pic">
    <div class="pic-grid c3 height-fill">
        <div class="column" style="width: 40%">
            <img class="pic-base" src="./images/cathedral/cathedral1.jpg" alt="cathedral1">
        </div>
        <div class="column" style="width: 30%">
            <img src="./images/cathedral/cath2.jpg" alt="cathedral2">
            <img src="./images/cathedral/cath4.jpg" alt="cathedral4">
        </div>
        <div class="column" style="width: 30%">
            <img src="./images/cathedral/cathedral3.jpg" alt="cathedral3">
            <img src="./images/cathedral/cathedral5.jpg" alt="cathedral5">
        </div>
    </div>
</div>

现有CSS #

.multi-pic {
    flex-direction: column;
}

.mob-stack {
    flex-direction: row;
}

.pic-grid {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.pic-grid.c2 .column {
    width: 50%;
}

.pic-grid.c3 .column {
    width: 33.3%;
    min-height:100%;
}

.pic-grid .column {
    box-sizing: content-box;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0 var(--pic-padding);
}

.pic-grid .column:first-child {
    padding-left: 0;
}

.pic-grid .column:last-child {
    padding-right: 0;
}

.pic-grid .column img {
    padding-bottom: calc( var(--pic-padding) * 2 ); 
}

.pic-grid.height-fill .column img {
    flex: 1 auto;
}

解决方案 #

针对iOS 15.7 Safari的flex布局兼容性问题，可通过以下修改修复图片拉伸：

1. 添加object-fit保持图片比例
   给图片设置object-fit属性，强制保持宽高比，避免被容器拉伸。根据需求选择cover（裁剪填充）或contain（完整显示）。

2. 调整flex属性与尺寸约束
   修改height-fill下的图片flex属性，同时明确图片的宽高规则，避免旧版Safari错误计算尺寸。

修改后的CSS代码：

.pic-grid .column img {
    padding-bottom: calc( var(--pic-padding) * 2 );
    width: 100%;
    height: auto;
    object-fit: cover; /* 按需替换为contain */
}

.pic-grid.height-fill .column img {
    flex: 1 0 auto; /* 替换原flex:1 auto，限制flex增长逻辑 */
    height: 100%; /* 配合object-fit确保比例正确 */
}

3. 额外兼容性优化（可选）
   若问题仍存在，可给.pic-grid .column添加align-items: stretch;，确保列内元素高度一致，同时避免图片被异常对齐影响：

.pic-grid .column {
    box-sizing: content-box;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0 var(--pic-padding);
    align-items: stretch; /* 添加此行 */
}

原理说明 #

iOS 15.7的Safari对flex:1 auto的解析与现代浏览器存在差异，会强制拉伸图片高度以填充容器；object-fit属性可以覆盖这种强制拉伸，保持图片原有比例；flex:1 0 auto则调整了flex项的增长规则，避免不必要的尺寸计算错误。

内容的提问来源于stack exchange，提问作者Guesser