17

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 large-image, which should be scaled down to the 15%. But this only works in Chrome/Opera, but not in FF/IE (the images are not responsive and therefore too big).

My code:

<table class="table table-striped table-condensed voc_list ">

<thead>
<tr>
<th style="width:15%;"></th>
<th style="width:50%;">Bezeichnung</th>
<th style="width:10%;">Zeitraum</th>
<th style="width:25%;">Ort</th>
</tr>
</thead>

<tbody>

<tr class="listview">
<td style="padding:15px 0px 15px 0px;"> 
<a href="xy" title="">
<img src="yx.jpg" class="img-responsive voc_list_preview_img" alt="" title=""></a>
</td>

<td style="width: 50%; padding:15px 15px 15px 15px;">
<a href="xy" title="">
<h3 class="nomargin_top">ABC</h3>
</a>
</td>

<td style="width:10%;">
555
</td>

<td>
XYZ
</td>

</tbody>

</table>

Is this a known problem in BS3? I couldn't find anything.

Edit: http://jsfiddle.net/cctyb/ - in Chrome it works, in FF the image is to big

Sonic750
  • 631
  • 3
  • 8
  • 17
  • possible duplicate of [Why do Firefox and Opera ignore max-width inside of display: table-cell?](http://stackoverflow.com/questions/2923710/why-do-firefox-and-opera-ignore-max-width-inside-of-display-table-cell) – Bass Jobsen Sep 17 '13 at 20:11

5 Answers5

22

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

Community
  • 1
  • 1
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • thx this works..., so this seems to be more a browser problem than a bootstrap problem? – Sonic750 Sep 18 '13 at 09:18
  • I don't know. I think there is nothing wrong with adding an image (with class img-responsive) to a table, so i will be an issue of Bootstrap. In addition i have post the issue here: https://github.com/twbs/bootstrap/issues/10690 – Bass Jobsen Sep 18 '13 at 09:40
  • 2
    you could put this code inside @media (min-width: 768px) { .img-responsive { width: 100% } } so it doesn't make smaller images bigger when the viewport is xs – denoise Jan 30 '14 at 03:43
  • Thank you so much, was trying to make images responsive inside table. – Shaiju T May 13 '15 at 08:38
  • Thanks! now img are responsive acordin table width ;) – equiman Oct 08 '15 at 19:45
  • This makes my single small images scale to the container. For example my 300px images end up being stretched to 1000px. How do we prevent the image stretching any larger than its actual pixel width? – Andy Fusniak Nov 27 '15 at 09:13
16

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>
Dieter Casier
  • 633
  • 5
  • 9
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" />
Abhineet Verma
  • 1,008
  • 8
  • 18
malnosna
  • 164
  • 1
  • 5
0

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();
    });
});
user3648328
  • 1
-2

My custom css:

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