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

Question

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

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

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

如果有解决方法或者为什么这只发生在 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 的最大宽度实现 https://developer.mozilla.org/en-US/docs/Web/CSS/max-width?redirectlocale=en-US&redirectslug=CSS%2Fmax-width#Examples