Menu
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>
897
To make an image responsive, you need to give a new value to its width property. Then the height of the image will adjust itself automatically. The important thing to know is that you should always use relative units for the width property like percentage, rather than absolute ones like pixels.
Responsive images Images in Bootstrap are made responsive with . img-fluid . max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
Responsive images automatically adjust to fit the size of the screen. Create responsive images by adding an . img-fluid class to the <img> tag. The image will then scale nicely to the parent element.
This looks like a Bootstrap issue...
Currently, here's a workaround : add .col-xs-12 to your responsive image.
Bootply
61
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.
50
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With