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
Images in Bootstrap are made responsive with . img-fluid . max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
.img-responsive. Makes an image responsive (will scale nicely to the parent element)
Use . table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally. Save this answer.
Responsive images automatically adjust to fit the size of the screen. Create responsive images by adding an .img-responsive class to the <img> tag. The image will then scale nicely to the parent element.
add .img-responsive{width:100%;}
to your css, see also: Why do Firefox and Opera ignore max-width inside of display: table-cell?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With