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>
This question is related to
html
css
image
twitter-bootstrap
twitter-bootstrap-3
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%;
}
}
in FF use inline style i.e.
<img src="..." class="img-responsive" style="width:100%; height:auto;" />
It rocks :)
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.
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!
Change the img-class responsive to:
.img-responsive, x:-moz-any-link {
display: block;
max-width: 100%;
width: auto;
height: auto;
just add .col-xs-12 to your responsive image. It's should work.
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 );
This looks like a Bootstrap issue...
Currently, here's a workaround : add .col-xs-12
to your responsive image.
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);
}
});
});
}
});
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.
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'>
Source: Stackoverflow.com