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

Question

In Firefox  tested on Win7 and Win8   with the code below - when a responsive image is inside of a  lt fieldset gt  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  lt fieldset gt  and  lt legend gt     lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt       lt meta charset  utf-8  gt       lt meta name  viewport  content  width device-width  initial-scale 1 0  gt       lt title gt Fieldset Responsive Image Test lt  title gt       lt link rel  stylesheet  href    netdna bootstrapcdn com bootstrap 3 1 1 css bootstrap min css  gt       lt link rel  stylesheet  href    netdna bootstrapcdn com bootstrap 3 1 1 css bootstrap-theme min css  gt   lt  head gt   lt body gt   lt div id  content  class  container  gt       lt div class  row  gt           lt div class  col-xs-10 col-xs-offset-1  gt               lt form gt                   lt fieldset gt                       lt legend gt I Am Legend lt  legend gt                           lt img class  img-responsive  src  data image svg xml base64 PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzY2NiIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNDQ0O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI U2Vjb25kIHNsaWRlPC90ZXh0Pjwvc3ZnPg    alt  img    gt                   lt  fieldset gt               lt  form gt           lt  div gt       lt  div gt   lt  div gt   lt  body gt   lt  html gt

User · Answer

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'>

User · Answer

add condition only firefox in your custom css file      only Firefox     -moz-document url-prefix         img-responsive   thumbnail gt img   thumbnail a gt img   carousel-inner gt  item gt img   carousel-inner gt  item gt a gt img         width  100

User · Answer

Change the img-class responsive to    img-responsive  x -moz-any-link   display  block  max-width  100   width  auto  height  auto

User · Answer

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 https   bugzilla mozilla org show bug cgi id 975632   Source  img-responsive in  lt fieldset gt  have the same behaviour

User · Answer

Similar to the answer given by Abdul    lt fieldset gt      lt legend gt Image lt  legend gt      lt img src       class  img-responsive  width  100     gt   lt  fieldset gt    It works properly in FF 29  Opera 12 17  Chromium 34 and in IE9  Yes  it s a weird set of browsers

User · Answer

This looks like a Bootstrap issue      Currently  here s a workaround   add  col-xs-12 to your responsive image   Bootply

User · Answer

in FF use inline style i e    lt img src       class  img-responsive  style  width 100   height auto     gt    It rocks

User · Answer

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                   lt img  gt                 attr  src     img  attr  src                 load function                     pic real width   this width                     pic stretch width     img  width                       if pic stretch width  gt  pic real width                                          img  width pic real width

User · Answer

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

User · Answer

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

User · Answer

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   lt 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  lt  768                  container    width  width val - 30          else                container    removeAttr   style              setWidth       window   resize  setWidth

User · Answer

All you need is width 100  somewhere that applies to the tag as shown by the various answers here   Using col-xs-12    lt  -- adds float left  which is usually not a problem -- gt   lt img class  img-responsive col-xs-12    gt    Or inline CSS    lt img class  img-responsive  style  width 100      gt    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  lt fieldset gt  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  lt fieldset gt  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

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

Examples related to html

Examples related to css

Examples related to image

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3