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

Question

a 元素从脚本中获取其 height，完整的代码在所有设备和浏览器上运行良好，除了 iOS 和 Safari（如果小足够）。图像在 height.

中被拉伸

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

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

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

如果我设置 width: 100% 和 height: 100% 我会在 chrome 中得到类似的视图，就像在 safari 中一样。

EDIT2："bug" 也出现在 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

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

Image inside flex-item rewrites "max-width: none" in Safari, iOS and Firefox

html

css

safari

ios