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>

Solution 1:

This looks like a Bootstrap issue...

Currently, here's a workaround : add .col-xs-12 to your responsive image.

Bootply

Solution 2:

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.

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

Solution 1:

Solution 2:

Related

Recent Posts