Best IT Recipes

3-D responsive boot images do not respond internally in FireFox

In Firefox (tested on Win7 and Win8), with the code below - when a responsive image is inside a <fieldset> , it no longer responds. This means that as the shape for the phone changes, the image will not decrease accordingly.

I can get around the problem easily, so I don’t need help. However, if you know a way to fix this, we will be very grateful.

The sensitive image in the code below will not respond to browser size in FireFox (at least on Win7 and Win8), unless you remove <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> ' src = "data: image / svg + xml; base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzY2NiIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNDQ0O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI + U2Vjb25kIHNsaWRlPC90ZXh0Pjwvc3ZnPg ==" alt = "img" /> <!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>
+42
html css image twitter-bootstrap twitter-bootstrap-3
Feb 21 '14 at 19:06
source share
12 answers

All you need is width:100% somewhere that applies to the tag, as shown in 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 recall

 .img-responsive { width:100%; }

COURT PROBLEMS

This is a known FF error that <fieldset> does not comply with overflow rules:

https://bugzilla.mozilla.org/show_bug.cgi?id=261037

To “fix” CSS, to fix the FireFox error, it would be to make a <fieldset> display:table-column . However, doing this, in accordance with the following link, will cause the fieldset file to fail to display in Opera:

https://github.com/TryGhost/Ghost/issues/789

So, just set your tag to 100% width as described in one of the above solutions.

+38
Feb 24 '14 at 17:01
source share

It looks like a bootstrap problem ...

Currently a workaround: add .col-xs-12 to your responsive image.

Bootply

+48
Feb 24 '14 at 16:04
source share

Change the .img recall 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.

+10
Jul 17 '14 at 4:09
source share

FF uses inline style ie

 <img src="..." class="img-responsive" style="width:100%; height:auto;" />

These are rocks :)

+2
May 23 '14 at 10:07
source share

In my case, I just wanted the image to react on a mobile scale, so I created a css-style .myimgrsfix that runs only on a mobile scale

 .myimgrsfix { @media(max-width:767px){ width:100%; } }

and applied this to the image <img class='img-responsive myimgrsfix' src='whatever.gif'>

+2
Jan 24 '15 at 23:56
source share

This seems to be a browser bug.

10690: An error is reported in Firefox for sensitive images (with maximum width: 100%) in table cells. No other browsers are affected. Cm

https://bugzilla.mozilla.org/show_bug.cgi?id=975632 .

Source

.img-responsive in <fieldset> have the same behavior.

+1
Feb 24 '14 at 16:05
source share

Change the img class to respond to:

 .img-responsive, x:-moz-any-link { display: block; max-width: 100%; width: auto; height: auto;
+1
Aug 07 '15 at 15:51
source share

just add .col-xs-12 to your responsive image. It should work.

0
May 19 '14 at 7:04
source share

Like the answer given by Abdul.

 <fieldset> <legend>Image</legend> <img src="..." class="img-responsive" width="100%" /> </fieldset>

It works correctly in FF 29, Opera 12.17, Chromium 34 and in IE9. Yes, this is a strange set of browsers!

0
Jun 06 '14 at 1:30
source share

I created this script to solve the img-responsive bootstrap3 class problem, and in my case it was 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); } }); }); } });
0
03 Oct '14 at 17:41
source share

For my problem, I did not want my images to scale to 100% when they were not designed to be the size of a container.

In my xs container (<768px as.container), without having a fixed width, the problem was resolved, so I turned it on again (except for filling 15px col.).

 // 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 );
0
Jan 24 '16 at 4:58
source share

add only firefox condition to 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%; } }
0
Jul 20 '17 at 2:11
source share


More articles:


All Articles