表格中的响应式图像(引导程序 3) [英] Responsive images in tables (bootstrap 3)

问题描述

我正在使用 Bootstrap 3 框架并且遇到了一些问题Firefox 中的img-responsive"类.我有一个 4 列表格，布局为 15/50/10/25%.第一列是大图，应该缩小到 15%.但这仅适用于 Chrome/Opera，而不适用于 FF/IE(图像没有响应，因此太大).

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

我的代码:

<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 中的已知问题吗?我找不到任何东西.

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

http://jsfiddle.net/cctyb/ - 在 Chrome 中它可以工作，在 FF 中图片太大了

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

推荐答案

将 .img-responsive{width:100%;} 添加到您的 css，另见:为什么 Firefox 和 Opera 忽略显示的最大宽度:表格单元格?

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