Kevin Nelson Kevin Nelson - 4 years ago 1314
HTML Question

Bootstrap 3 .img-responsive images are not responsive inside fieldset in FireFox

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>

Answer Source

UPDATE: THIS IS FIXED IN BOOTSTRAP 3.2.0

At least as of Bootstrap version 3.2.0, this has been fixed. Bootstrap has added width:100% to the definition for .img-responsive, and other responsive image tags.

FOR THOSE WHO CAN'T UPGRADE

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

<img class='img-responsive' style='width:100%;' />

Or, in your CSS, do the same thing that Bootstrap 3.2+ does:

.img-responsive { 
    /* other definitions */
    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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download