Responsive Images In Tables (bootstrap 3)

I'm using the Bootstrap 3 Framework and have some troubles with the 'img-responsive' class in Firefox. I have a 4 column-Table with 15/50/10/25% layout. In the first column is an l

Solution 1:

add .img-responsive{width:100%;} to your css, see also: Why do Firefox and Opera ignore max-width inside of display: table-cell?

Solution 2:

I also had this problem, the solution for me was "table-layout fixed"

.table-container {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
}
.table-cell-container {
    text-align: left;
    display: table-cell;
    vertical-align: middle;
    &.center{
        text-align: center;
    }
    img{
        display: inline-block;
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 100%;

    }
}

<div class="table-container">
<div class="table-cell-container center">
         <img src="myimage.jpg" width="100" height="100" alt="myimage" />
</div>
</div>

Solution 3:

The answer from Bass

.img-responsive {
   width:100%;
}

does work, but it also scales up other images.

What I have done instead is create another class as

.img-responsive-2 { 
   width: 100%; 
}

and put it together with the original .img-responsive so that I have the flexibility to use it only for images in tables.

<img src="someimage.jpg" class="img-responsive img-responsive-2" />

Solution 4:

Try this code

$(window).load(function() {
    $('img.img-responsive').each(function(){
        // Remember image size
        var imgWidth = $(this).width();
        // hide image 
        $(this).hide();
        // if container width < image width, we add width:100% for image 
        if ( $(this).parent().width() < imgWidth ) { $(this).css('width', '100%'); }
        // show image
        $(this).show();
    });
});

Solution 5:

My custom css:

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