Firefox - 最大宽度图像在fieldset中不起作用

Question

我正在处理大型表单，并注意到如果图像位于字段集中，则表示它不符合max-width: 100%规则。

它在Chrome和Safari中正常运行，但在Firefox中，图像溢出容器，图像保持正常大小。

我更愿意不对html结构进行更改并将图像保留在fieldsets中。

如果有解决方法或为什么只在Firefox中发生这种情况，任何人都有任何想法？

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

Answer 1

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

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

您可以通过MDN检查此链接以获取max-width实施 https://developer.mozilla.org/en-US/docs/Web/CSS/max-width?redirectlocale=en-US&redirectslug=CSS%2Fmax-width#Examples

Answer 2

您可以尝试此解决方法，定义width属性。使用max-width覆盖width属性

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

修改：请检查此网址：http://codepen.io/anon/pen/PwrWQK 我添加了基于图像维度动态更改max-width属性的脚本，希望这有助于解决您在Firefox中的问题。