Firefox

Question

我正在处理一个大表单，我注意到如果图像位于字段集中，则它不遵守 max-width: 100% 规则。

它在 Chrome 和 Safari 中按预期工作，但在 Firefox 中图像溢出容器并且图像保持其正常大小。

我宁愿不更改 html 结构并将图像保留在字段集中。

任何人都知道是否有解决方法或者为什么这只发生在 Firefox 中？

简单示例
http://codepen.io/FernE97/pen/NPZKaR

Answer 1

您可以尝试这个变通方法，宽度已定义属性。使用最大宽度覆盖宽度属性

img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

编辑：请检查此 url：http://codepen.io/anon/pen/PwrWQK 我添加了根据图像尺寸动态更改最大宽度属性的脚本，希望这有助于解决您在 Firefox 中的问题。

Answer 2

对于纯粹的 CSS 解决方案，请检查此 link http://codepen.io/saig/pen/RNXLwY 使用 800x400 和 400x400 图像尺寸进行测试

img {
    width: 100%;
    max-width: -moz-fit-content;
    max-width: -webkit-fit-content;
    height: auto;
}

Firefox - 最大宽度图像在字段集中不起作用