旧 iPhone 上图片被纵向拉得很长

[Dream4ever]

问题描述

一个页面里的图片在旧 iPhone 上被拉得很长，出现该情况的机型为 iPhone 7 及 iPhone XR，效果如下图所示。

解决过程

用 ios css parent inline-flex child image ratio 和 css ios image keep ratio 这两组关键字搜到的文章都没能解决问题，能够解决问题的 CSS force image resize and keep aspect ratio 又忘了是从哪里搜到的了，最终生效的是这个问答中的下面这段代码：

.img {
   object-fit: contain;
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
}

代码的变化如下图所示，猜测可能跟父元素的 flex 属性有关。