表格中的响应式图像（引导程序3）

本文介绍了表格中的响应式图像（引导程序3）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用Bootstrap 3 Framework，并且在Firefox中的$ im $ b $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 =xytitle => 
< img src =yx.jpgclass =img-responsive voc_list_preview_imgalt =title =>< / a> 
< / td> 
 
< td style =width：50％; padding：15px 15px 15px 15px;> 
< a href =xytitle => 
< h3 class =nomargin_top> ABC< / h3> 
< / a> 
< / td> 
 
< td style =width：10％;> 
 555 
< / td> 
 
< td> 
 XYZ 
< / td> 
 
< / tbody> 
 
< / table>

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

编辑： - 在Chrome中它的工作原理是，在FF中图像是大的

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