Html Bootstrap 3 .img-responsive 图像在 FireFox 中的字段集内没有响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21943108/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 .img-responsive images are not responsive inside fieldset in FireFox
提问by Kevin Nelson
In Firefox (tested on Win7 and Win8), with the code below - when a responsive image is inside of a <fieldset>it is no longer responsive. This means that as my form resizes for the phone, the image will not shrink accordingly.
在 Firefox 中（在 Win7 和 Win8 上测试），使用下面的代码 - 当响应图像位于 a 内部时，<fieldset>它不再响应。这意味着当我的表单为手机调整大小时，图像不会相应缩小。
I can "work-around" the issue easily, so I don't need any help with that. However, if you know of a way to fix this, it would be greatly appreciated.
我可以轻松地“解决”这个问题，所以我不需要任何帮助。但是，如果您知道解决此问题的方法，将不胜感激。
The responsive image in the code below will not be responsive to browser size in FireFox (at least on Win7 and Win8) unless you remove the <fieldset>and <legend>.
除非您删除<fieldset>和<legend>.
<!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>
回答by zessx
This looks like a Bootstrap issue...
这看起来像一个 Bootstrap 问题......
Currently, here's a workaround : add .col-xs-12to your responsive image.
目前，这里有一个解决方法：添加.col-xs-12到您的响应式图像。
回答by Kevin Nelson
All you need is width:100%somewhere that applies to the tag as shown by the various answers here.
您所需要的只是width:100%适用于标签的某个地方，如此处的各种答案所示。
Using col-xs-12:
使用 col-xs-12：
<!-- adds float:left, which is usually not a problem -->
<img class='img-responsive col-xs-12' />
Or inline CSS:
或内联 CSS：
<img class='img-responsive' style='width:100%;' />
Or, in your own CSS file, add an additional definition for .img-responsive
或者，在您自己的 CSS 文件中，为 .img-responsive 添加额外的定义
.img-responsive {
width:100%;
}
THE ROOT OF THE PROBLEM
问题的根源
This is a known FF bug that <fieldset>does not respect overflow rules:
这是一个已知的 FF 错误，<fieldset>它不遵守溢出规则：
https://bugzilla.mozilla.org/show_bug.cgi?id=261037
https://bugzilla.mozilla.org/show_bug.cgi?id=261037
A CSS "FIX" to fix the FireFox bug would be to make the <fieldset>display:table-column. However, doing so, according to the following link, will cause the display of the fieldset to fail in Opera:
修复 FireFox 错误的 CSS“FIX”是将<fieldset>display:table-column. 但是，根据以下链接，这样做会导致字段集在 Opera 中的显示失败：
https://github.com/TryGhost/Ghost/issues/789
https://github.com/TryGhost/Ghost/issues/789
So, just set your tag to 100% width as described in one of the solutions above.
因此，只需将您的标签设置为 100% 宽度，如上述解决方案之一所述。
回答by Ryan Allen
Change .img-responsive inside bootstrap.css to the following:
将 bootstrap.css 中的 .img-responsive 更改为以下内容：
.img-responsive {
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
For some reason adding width: 100% to the mix makes img-responsive work.
出于某种原因，将 width: 100% 添加到混合中会使 img 响应工作。
回答by Dylan Hamilton-Foster
In my case I only wanted the image to behave responsively at mobile scale so I created a css style .myimgrsfix that only kicks in at mobile scale
在我的情况下，我只希望图像在移动范围内反应灵敏，所以我创建了一个 css 样式 .myimgrsfix 只在移动范围内起作用
.myimgrsfix {
@media(max-width:767px){
width:100%;
}
}
and applied that to the image <img class='img-responsive myimgrsfix' src='whatever.gif'>
并将其应用于图像 <img class='img-responsive myimgrsfix' src='whatever.gif'>
回答by aquartier
just add .col-xs-12 to your responsive image. It's should work.
只需将 .col-xs-12 添加到您的响应式图像中。它应该工作。
回答by Abdul Rahman
in FF use inline style i.e.
在 FF 中使用内联样式即
<img src="..." class="img-responsive" style="width:100%; height:auto;" />
It rocks :)
它摇滚:)
回答by Foobar
It seems to be a browser bug.
这似乎是一个浏览器错误。
10690: Reported a bug in Firefox for responsive images (those with max-width: 100%) in table cells. No other browsers are affected. See
10690：报告了 Firefox 中表格单元格中响应图像（最大宽度：100%）的错误。其他浏览器不受影响。看
.img-responsivein <fieldset>have the same behaviour.
.img-responsive在<fieldset>有相同的行为。
回答by Jonas Furlan
Change the img-class responsive to:
更改 img-class 响应：
.img-responsive, x:-moz-any-link {
display: block;
max-width: 100%;
width: auto;
height: auto;
回答by rambillo
For my issue, I didn't want my images scaled to 100% when they weren't intended to be as large as the container.
对于我的问题，我不希望我的图像在不打算与容器一样大时缩放到 100%。
For my xs container (<768px as .container), not having a fixed width drove the issue, so I put one back on to it (less the 15px col padding).
对于我的 xs 容器（<768px 作为 .container），没有固定的宽度导致了这个问题，所以我把一个放回它（减去 15px col padding）。
// 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 );
回答by Marosdee Uma
add condition only firefox in your custom css file.
在您的自定义 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%;
}
}
