本文介绍了表格中的响应式图像(引导程序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中图像是大的
code> .img-responsive {width:100%;} 到您的css中,另请参阅:
I'm using the Bootstrap 3 Framework and have some troubles withthe "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)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!