Images réactives dans les tableaux (bootstrap 3)
Je suis en utilisant le Bootstrap 3 Cadre et ont quelques problèmes avec la
le "img-responsive" class dans Firefox.
J'ai une 4 de la colonne de la Table avec 15/50/10/25% mise en page.
Dans la première colonne est une grande image, qui devrait être ramené à 15%.
Mais cela ne fonctionne que dans Chrome/Opera, mais pas dans FF/IE (les images ne sont pas sensibles et donc trop gros).
Mon 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>
Est-ce un problème connu dans BS3? Je ne pouvais pas trouver quoi que ce soit.
Edit: http://jsfiddle.net/cctyb/ - en Chrome cela fonctionne, en FF l'image est de grande
source d'informationauteur Sonic750
Vous devez vous connecter pour publier un commentaire.
ajouter
.img-responsive{width:100%;}
à votre css, voir aussi: Pourquoi Firefox et Opera ignorer max-largeur à l'intérieur de display: table-cell?J'ai aussi eu ce problème, la solution pour moi a été "table-layout fixe"
La réponse de la Basse
fonctionne, mais il a également échelles up d'autres images.
Ce que j'ai fait au lieu de cela, c'est de créer une autre classe que
et le mettre avec l'original
.img-responsive
de sorte que j'ai la flexibilité de l'utiliser uniquement pour les images dans les tableaux.Essayer ce code
Mon css personnalisé: