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

【问题标题】：Firefox - max-width images not working within fieldsetFirefox - 最大宽度图像在字段集中不起作用
【发布时间】：2015-04-15 06:40:46
【问题描述】：

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

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

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

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

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

【问题讨论】：

【解决方案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;
}

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

将宽度设置为 100% 在技术上确实可行，但如果图像小于容器，它将拉伸它以适应我想要避免的容器。
我已经编辑了我的答案并试图为您的问题提供解决方案
嘿，感谢您尝试的解决方案，javascript 方式可以工作，但需要在调整窗口大小时更新，以在屏幕大小发生变化时计算图像宽度。正在寻找一个 CSS 解决方案，但看起来真的没有。