Bootstrap 3 .img-responsive images are not responsive inside fieldset in FireFox
Question
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.
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> .
<!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>
12 answers
solution1
51 2014-02-24 16:04:58
This looks like a Bootstrap issue ...
Currently, here's a workaround : add .col-xs-12 to your responsive image.
solution2
45 ACCPTED 2014-02-24 17:01:34
All you need is width:100% somewhere that applies to the tag as shown by the various answers here.
Using col-xs-12:
<!-- adds float:left, which is usually not a problem -->
<img class='img-responsive col-xs-12' />
Or inline CSS:
<img class='img-responsive' style='width:100%;' />
Or, in your own CSS file, add an additional definition for .img-responsive
.img-responsive {
width:100%;
}
THE ROOT OF THE PROBLEM
This is a known FF bug that <fieldset> does not respect overflow rules:
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:
https://github.com/TryGhost/Ghost/issues/789
So, just set your tag to 100% width as described in one of the solutions above.
solution3
11 2014-07-17 04:09:23
Change .img-responsive inside bootstrap.css to the following:
.img-responsive {
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
For some reason adding width: 100% to the mix makes img-responsive work.
solution4
3 2015-01-24 23:56:10
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
.myimgrsfix {
@media(max-width:767px){
width:100%;
}
}
and applied that to the image <img class='img-responsive myimgrsfix' src='whatever.gif'>
solution5
2 2014-05-23 10:07:14
in FF use inline style ie
<img src="..." class="img-responsive" style="width:100%; height:auto;" />
It rocks :)
solution6
1 2014-02-24 16:05:36
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
.img-responsive in <fieldset> have the same behaviour.
solution7
1 2014-05-19 07:04:10
just add .col-xs-12 to your responsive image. It's should work.
solution8
1 2015-08-07 15:51:46
Change the img-class responsive to:
.img-responsive, x:-moz-any-link {
display: block;
max-width: 100%;
width: auto;
height: auto;
solution9
0 2014-06-06 01:30:32
Similar to the answer given by Abdul.
<fieldset>
<legend>Image</legend>
<img src="..." class="img-responsive" width="100%" />
</fieldset>
It works properly in FF 29, Opera 12.17, Chromium 34 and in IE9. Yes, it's a weird set of browsers!
solution10
0 2014-10-03 17:41:47
I created this script to solve the problem of the class img-responsive bootstrap3, and in my case this solved!
$(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);
}
});
});
}
});
solution11
0 2016-01-24 04:58:24
For my issue, I didn't want my images scaled to 100% when they weren't intended to be as large as the container.
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).
// 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 );
solution12
0 2017-07-20 02:11:44
add condition only firefox in your custom css file.
/* only Firefox */
@-moz-document url-prefix() {
.img-responsive, .thumbnail>img, .thumbnail a>img, .carousel-inner>.item>img, .carousel-inner>.item>a>img {
width: 100%;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.