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

标签 html css firefox

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

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

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

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

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

最佳答案

对于纯 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

关于html - Firefox - 最大宽度图像在字段集中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29525178/

相关文章:

php - 我想在新窗口中打开 pgsql 查询而不是下载为 csv

javascript - 在 extjs4 中编辑时需要对齐复选框、添加多条记录和查看日期字段?

css - 当列数小于列数时,Chrome 列会出现错误

firefox - 从十六进制格式解码 Firefox 浏览器缓存条目

firefox - YUI uploader + SSL + Firefox

css - 除了 firefox 之外,没有其他浏览器会立即加载 CSS 文件中的更改

html - 如何让这些导航元素居中?

html - CSS :not selector isn't working

javascript - 检查 javascript 中所需标记字段的有效性

javascript - 两个div之间的水平滑动效果与JQuery