.img-responsive class breaks table with fixed widths in FF

[bassjobsen]

See: http://jsfiddle.net/cctyb/ (original: http://stackoverflow.com/questions/18846744/responsive-images-in-tables-bootstrap-3/1885903).

Possible solution seems add:
.table .img-responsive{width:100%} to the css / less, see: http://stackoverflow.com/questions/2923710/why-do-firefox-and-opera-ignore-max-width-inside-of-display-table-cell

[mdo]

This seems more like browser bugs to me than a Bootstrap bug. The .img-responsive class sets images to inline-block and if the table doesn't respect that, the browser should fix it. Can you file a bug against Firefox for this?

Depending on the answer, we can revisit adding this as a note to the Browser compatibility docs section.

[cvrebert]

@bassjobsen So, did you file a bug against Firefox, or do we still need to file one?

[bassjobsen]

Sorry, i can't remember. I think i did, but i can't find it again for now. Sorry.

[mdo]

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

[cvrebert]

@mdo <3

[zessx]

Workaround, pending correction : add .col-xs-12 to your .img-responsive.

[emaildano]

@zessx, and all. For a workaround that fits well into your existing markup here's a fix via LESS.

.img-responsive {
.make-xs-column(12);
}

[emaildano]

Correction

That works but could add extra padding on your images. Here's an update to that LESS fix.

.img-responsive {
.make-xs-column(12; @gutter: 0);
float: none;
}

That applies all the extra necessary CSS and zeros out the extra padding.

[Gorli]

You can also temporarily use this trick: http://css-tricks.com/snippets/css/css-hacks-targeting-firefox/

EXAMPLE:

/* only Firefox */
@-moz-document url-prefix() {
.img-responsive, .thumbnail>img, .thumbnail a>img, .carousel-inner>.item>img, .carousel-inner>.item>a>img {
width: 100%;
}
}

[gvilcins]

Try adding:
table .img-responsive {
width: 100%;
}

Seemed to work for me...

[cvrebert]

A fix for the bug should land in Firefox 46: http://bugzil.la/823483
(Refs #19155)