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

Posted 2023-03-11

【中文标题】flex-item 中的图像在 Safari、iOS 和 Firefox 中重写了“max-width: none”

【英文标题】：Image inside flex-item rewrites "max-width: none" in Safari, iOS and Firefox

【发布时间】：2015-09-07 13:15:05

【问题描述】：

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

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

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

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

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

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

【参考方案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