为什么我的图片在手机 iphone safari 上被拉伸？

Question

在第二张图片中有android，一切正常。 但在 safari 上的 iPhone 7 上，图像被垂直拉伸。为什么会这样？ 我的html代码和css

 <div class="configuration__grid">
                <div class="configuration__grid--box"> <img src="/img/bag.png" class="conf-img"
                        alt="picture">
                </div>

 .configuration__grid {
  display: flex;
}

.configuration__grid--box {
  flex: 0.5;
  padding: 10px;
  flex-direction: column;
  display: flex;
}

.conf-img {
  width: 100%;
  height: auto;
}

Answer 1

试试看有没有用

对象匹配：覆盖；

查看此链接了解更多详情 https://developer.mozilla.org/en/docs/Web/CSS/object-fit