表格中的响应式图像（引导程序3） [英] Responsive images in tables (bootstrap 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中的一个已知问题吗？我找不到任何东西。

编辑： http：// jsfiddle.net/cctyb/ - 在Chrome中它的工作原理是，在FF中图像是大的

code> .img-responsive {width：100％;} 到您的css中，另请参阅：为什么Firefox和Opera会忽略display-table中的max-width？

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

解决方案

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

这篇关于表格中的响应式图像（引导程序3）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！