Bootstrap 3フレームワークを使用していますが、Firefoxの「img-responsive」クラスに問題があります。15/ 50/10/25%レイアウトの4列のテーブルがあります。最初の列は大きな画像で、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/ -in Chrome動作します、FFでは画像が大きくなります
.img-responsive{width:100%;}
をcssに追加します。以下も参照してください: FirefoxとOperaがディスプレイ内の最大幅を無視する理由:table-cell?
私もこの問題を抱えていました。私にとっての解決策は「テーブルレイアウトを修正しました」
.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>
低音からの答え
.img-responsive {
width:100%;
}
動作しますが、他の画像も拡大します。
私が代わりにしたことは、別のクラスを作成することです
.img-responsive-2 {
width: 100%;
}
元の.img-responsive
そのため、テーブル内の画像に対してのみ使用する柔軟性があります。
<img src="someimage.jpg" class="img-responsive img-responsive-2" />
このコードを試してください
$(window).load(function() {
$('img.img-responsive').each(function(){
// Remember image size
var imgWidth = $(this).width();
// hide image
$(this).hide();
// if container width < image width, we add width:100% for image
if ( $(this).parent().width() < imgWidth ) { $(this).css('width', '100%'); }
// show image
$(this).show();
});
});