Html Bootstrap 3.在FireFox中，img响应映像在字段集中没有响应

在Firefox中（在Win7和Win8上测试），使用下面的代码-当响应图像位于

中时，它不再响应。这意味着，当我的表单为手机调整大小时，图像不会相应缩小

我可以很容易地“解决”这个问题，所以我不需要任何帮助。但是，如果您知道一种解决方法，将不胜感激

下面代码中的响应图像将不会响应FireFox中的浏览器大小（至少在Win7和Win8上），除非您删除

和

现场集响应图像测试
我是传奇

这看起来像

目前，这里有一个解决方法：将

.col-xs-12

添加到响应图像中

---

这似乎是一个浏览器错误

10690:报告Firefox中的一个bug，用于表单元格中的响应图像（最大宽度为100%）。其他浏览器不受影响。看见

---

.img responsive

中的

具有相同的行为。

您所需要的只是

宽度：100%

适用于标签的某个位置，如这里的各种答案所示

使用col-xs-12：

<!-- adds float:left, which is usually not a problem -->
<img class='img-responsive col-xs-12' />

问题的根源

这是一个已知的FF错误，

不遵守溢出规则：

修复FireFox bug的CSS“修复”是使

显示：表列
。但是，根据以下链接，这样做将导致字段集在Opera中显示失败：


因此，只需将标签设置为100%宽度，如上述解决方案之一所述。
只需将.col-xs-12添加到响应图像中即可。它应该可以工作。
在FF中使用内联样式，即

<img src="..." class="img-responsive" style="width:100%; height:auto;" />



它摇摆：）
类似于阿卜杜勒给出的答案

<fieldset>
   <legend>Image</legend>
   <img src="..." class="img-responsive" width="100%" />
</fieldset>


形象

它在FF 29、Opera 12.17、Chromium 34和IE9中正常工作。是的，这是一套奇怪的浏览器
 将.img responsive inside bootstrap.css更改为以下内容：

.img-responsive {
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto;
}

出于某种原因，向混合中添加宽度：100%使img响应工作。
我创建此脚本是为了解决img响应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);
                }
            });         
        });
    }

});

$（文档）.ready（函数（）{
如果（$.browser.msie）{
变量pic_real_width，pic_real_height；
变量图像=$（“.img响应”）；
images.each（函数（）{
var img=$（本）；
$（“图片真实宽度”）
{
$（img）.width（pic\u real\u width）；
}
});         
});
}
});
在我的例子中，我只希望图像在移动范围内表现出响应性
所以我创建了一个css样式的.myimgrsfix，它只在移动范围内起作用

.myimgrsfix {
    @media(max-width:767px){
        width:100%;
    }
}

并将其应用于图像
更改img类别以响应：

.img-responsive, x:-moz-any-link {
display: block;
max-width: 100%;
width: auto;
height: auto;

对于我的问题，我不希望我的图像在没有容器那么大的情况下缩放到100%

对于my xs容器（在自定义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%;
   }
}

所以，我不想在
级别上进行变通，而是在
级别上进行变通（如我所做的回答中所示）……但是看起来这种变通是最好的解决方案，所以我给你一个奖励。事实上，col-xs-12在你的img元素上添加了一个不需要的浮点。只需添加.img responsible{width:100%；}对于你的CSSCan，请解释一下？据我所知，你不需要
填充：0
，因为图像本身将是
宽度：100%
。你只需要
填充：0
在一个
.col-xs-12
上，这样图像就会占据整个宽度…但这不是我们在这里讨论的@KevinNelson你是对的。不需要添加填充：0。感谢你的解释。最近我发现这修复了
img responsive
位于
内联块中的错误
elementyes也对我有效（要修复bootstrap v3.3.7中的FF大小问题），为什么不更好地将其添加到css中呢？它对我有效。内联很难看；）purecss中的同样问题也可以通过这个解决。我在一个表中有一个图像，这对我来说很有用，谢谢！
.myimgrsfix {
    @media(max-width:767px){
        width:100%;
    }
}

.img-responsive, x:-moz-any-link {
display: block;
max-width: 100%;
width: auto;
height: auto;

// 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 );

/* only Firefox */
@-moz-document url-prefix() {
   .img-responsive, .thumbnail>img, .thumbnail a>img, .carousel-inner>.item>img, .carousel-inner>.item>a>img {
      width: 100%;
   }
}