表格中的响应图像(bootstrap 3)

Question

我正在使用Bootstrap 3 Framework并且在Firefox中使用"img-responsive"类有一些麻烦.我有一个4列表,15/50/10/25%布局.在第一列是一个大图像,应缩小到15%.但这仅适用于Chrome/Opera,但不适用于FF/IE(图像不响应,因此太大).

我的代码:

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

这是BS3中的已知问题吗？我找不到任何东西.

编辑:http://jsfiddle.net/cctyb/ - 在Chrome中它可以工作,在FF中图像很大

Answer 1

添加.img-responsive{width:100%;}到您的CSS,另请参阅:为什么Firefox和Opera忽略display:table-cell中的max-width？

Answer 2

我也有这个问题,我的解决方案是"表格布局固定"

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