Flexbox列中图片aspect ratio跨浏览器兼容异常问题求助

最近在做一个包含图片的Flexbox列布局时，给图片设置了max-width: 100%来保证响应式适配，同时希望维持图片的原始宽高比，但遇到了一个在外部环境难以复现的异常Bug。以下是近似的代码示例：

HTML代码 #

<ul> 
  <li> 
    <img src="https://images.unsplash.com/photo-1575014774591-d036b92ae5ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=612&q=80" height="912" width="1462" /> 
  </li> 
  <li> 
    <img src="https://images.unsplash.com/photo-1575014774591-d036b92ae5ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=612&q=80" height="912" width="1462" /> 
  </li> 
  <li> 
    <img src="https://images.unsplash.com/photo-1575014774591-d036b92ae5ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=612&q=80" height="912" width="1462" /> 
  </li> 
  <li> 
    <img src="https://images.unsplash.com/photo-1575014774591-d036b92ae5ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=612&q=80" height="912" width="1462" /> 
  </li> 
  <li> 
    <img src="https://images.unsplash.com/photo-1575014774591-d036b92ae5ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=612&q=80" height="912" width="1462" /> 
  </li> 
  <li> 
    <img src="https://images.unsplash.com/photo-1575014774591-d036b92ae5ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=612&q=80" height="912" width="1462" /> 
  </li> 
</ul>

CSS代码 #

* { margin: 0; padding: 0; box-sizing: border-box; }
ul { border: 1px solid red; display: flex; flex-wrap: wrap; width: 400px; list-style-type: none; justify-content: space-between; }
li { width: 33%; border: 1px solid blue; padding: 0 10px; margin-bottom: 10px; display: flex; }
img { max-width: 100%; height: auto; }

各浏览器的表现差异 #

• Chrome：移除图片的height:auto属性会直接破坏图片的宽高比
• iOS Safari：不添加height:auto时图片宽高比正常，添加该属性后反而出现异常
• 桌面Safari：无论是否添加height:auto，图片的宽高比都表现异常

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