ios - flex-item 中的图像在 Safari、iOS 和 Firefox 中重写 "max-width: none"

Question

a 元素从脚本中获取其高度，完整的代码在所有设备和浏览器上运行良好，除了 iOS 和 Safari(如果足够小)。图像在 height 中被拉伸(stretch)。

目标是让图像始终居中使用 flex。我在那个页面上使用了很多 flex，所以我也想在那里使用它。

http://codepen.io/notyetnamed/pen/gaboXK

编辑:被忽略的不是最大高度，而是被重写的最大宽度。

如果我设置 width: 100% 和 height: 100% 我在 chrome 中得到的 View 类似于在 safari 中的 View 。

EDIT2:“错误”也出现在 firefox 中。

Answer 1

由于 Safari、Firefox 和其他一些软件中的错误，现在看来不可能。

所以我删除了 flex 属性并添加了一些常规样式以使图像在其容器中居中。

.box img {
  height: 100%;
  width: auto;
  position: absolute;
  left: -100%;
  right: -100%;
  top: -100%;
  bottom: -100%;
  margin: auto;
  max-width: none;
}

http://codepen.io/notyetnamed/pen/dYYYxP