Bootstrap 3 .img响应的图像在FireFox中的fieldset内部没有响应
在Firefox（Win7和Win8testing版）中，使用下面的代码 – 当响应图像位于<fieldset>内时，它不再响应。 这意味着，随着我的表单调整为手机，图像不会相应缩小。
我可以很容易地“解决”这个问题，所以我不需要任何帮助。 但是，如果你知道一个方法来解决这个问题，将不胜感激。
除非您删除<fieldset>和<legend>否则下面代码中的响应图像将不会响应FireFox中的浏览器大小（至less在Win7和Win8上）。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fieldset Responsive Image Test</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"> </head> <body> <div id='content' class='container'> <div class='row'> <div class='col-xs-10 col-xs-offset-1'> <form> <fieldset> <legend>I Am Legend</legend> <img class='img-responsive' src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzY2NiIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNDQ0O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+U2Vjb25kIHNsaWRlPC90ZXh0Pjwvc3ZnPg==" alt="img" /> </fieldset> </form> </div> </div> </div> </body> </html>
这看起来像一个引导问题 …
目前，这是一个解决方法：将.col-xs-12添加到您的响应式图像。
Bootply
所有你需要的是width:100%适用于标签的地方，如这里的各种答案所示。
使用col-xs-12：
<!-- adds float:left, which is usually not a problem --> <img class='img-responsive col-xs-12' />
或内联CSS：
<img class='img-responsive' style='width:100%;' />
或者，在您自己的CSS文件中，为.img-responsive添加一个额外的定义
.img-responsive { width:100%; }
问题的根源
这是一个已知的FF错误， <fieldset>不尊重溢出规则：
https://bugzilla.mozilla.org/show_bug.cgi?id=261037
修复FireFox错误的CSS“FIX”将使<fieldset> display:table-column 。 但是，按照以下链接，将会导致字段集的显示在Opera中失败：
https://github.com/TryGhost/Ghost/issues/789
所以，如上面的解决scheme之一所述，将标签设置为100％的宽度。
将bootstrap.css中的.img-responsive更改为以下内容：
.img-responsive { display: block; max-width: 100%; width: 100%; height: auto; }
出于某种原因，添加宽度：100％的混合使img响应的工作。
在FF中使用内联样式即
<img src="..." class="img-responsive" style="width:100%; height:auto;" />
它岩石:)
在我的情况下，我只希望图像在移动规模作出反应，所以我创build了一个css样式.myimgrsfix，只有在移动规模
.myimgrsfix { @media(max-width:767px){ width:100%; } }
并将其应用于图片<img class='img-responsive myimgrsfix' src='whatever.gif'>
这似乎是一个浏览器错误。
10690：在表格单元格中报告了Firefox中的响应式图像（最大宽度为100％）中的错误。 没有其他浏览器受到影响。 看到
资源
。 <fieldset>中的.img-responsive具有相同的行为。
将img-class更改为：
.img-responsive, x:-moz-any-link { display: block; max-width: 100%; width: auto; height: auto;
类似于阿卜杜勒给出的答案。
<fieldset> <legend>Image</legend> <img src="..." class="img-responsive" width="100%" /> </fieldset>
它在FF 29，Opera 12.17，Chromium 34和IE9中正常运行。 是的，这是一个奇怪的浏览器！
我创build了这个脚本来解决类img-responsive bootstrap3的问题，在我的情况下，这个问题解决了！
$(document).ready(function() { if ($.browser.msie) { var pic_real_width, pic_real_height; var images = $(".img-responsive"); images.each(function(){ var img = $(this); $("<img/>") .attr("src", $(img).attr("src")) .load(function() { pic_real_width = this.width; pic_stretch_width = $(img).width(); if(pic_stretch_width > pic_real_width) { $(img).width(pic_real_width); } }); }); } });
只需将.col-xs-12添加到您的响应式图像即可。 它应该工作。
对于我的问题，当他们不打算像容器一样大时，我不希望我的图像缩放到100％。
对于我的xs容器（小于768px为.container），没有一个固定的宽度驱动问题，所以我把它放回去（less了15px col填充）。
// Helps bootstrap 3.0 keep images constrained to container width when width isn't set a fixed value (below 768px), while avoiding all images at 100% width. // NOTE: proper function relies on there being no inline styling on the element being given a defined width ( '.container' ) function setWidth() { width_val = $( window ).width(); if( width_val < 768 ) { $( '.container' ).width( width_val - 30 ); } else { $( '.container' ).removeAttr( 'style' ); } } setWidth(); $( window ).resize( setWidth );
在自定义的css文件中添加条件只有Firefox。
/* only Firefox */ @-moz-document url-prefix() { .img-responsive, .thumbnail>img, .thumbnail a>img, .carousel-inner>.item>img, .carousel-inner>.item>a>img { width: 100%; } }
