Flexbox子元素内height:100%的图片在Safari中高度异常问题求助

现有一个设置为display:flex的容器，包含两个flex-basis均为50%的子元素。其中一个子元素内的图片设置了height:100%、max-width:100%及object-fit:cover，但该图片在Safari浏览器中占用的高度远超出预期。

效果对比 #

原始代码 #

HTML代码 #

<div class='wrapper'>
  <div class='first'></div>
  <div class="second">
    <img src="https://pixy.org/src/465/4654979.jpg"
  </div>
</div>

CSS代码 #

.wrapper {
  display: flex;
}

.first {
  flex-basis: 50%;
}

.second {
  flex-basis: 50%;
}
img {
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

修复方案 #

Safari对flex子元素内的百分比高度解析存在兼容性问题，可通过以下方式解决：

1. 将图片父元素设为flex容器
   给.second添加display: flex，让图片在flex上下文里自动填充父元素空间：

.second {
  flex-basis: 50%;
  display: flex;
}

2. 添加明确的高度约束
   给外层容器和子元素设置明确高度，确保百分比高度能正确计算：

.wrapper {
  display: flex;
  height: 100vh; /* 可根据实际需求调整高度值 */
}
.first, .second {
  flex-basis: 50%;
  height: 100%;
}

3. 修复HTML标签问题
   原代码中<img>标签未闭合，可能导致渲染异常，建议补充闭合：

<img src="https://pixy.org/src/465/4654979.jpg" />

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