web-dev-qa-db-fra.com

Images réactives dans les tableaux (bootstrap 3)

J'utilise le Bootstrap 3 Framework et j'ai quelques problèmes avec la classe "img-responsive" dans Firefox. J'ai une table à 4 colonnes avec une disposition de 15/50/10/25%. Dans la première colonne se trouve une grande image, qui devrait être réduite à 15%. Mais cela ne fonctionne que dans Chrome/Opera, mais pas dans FF/IE (les images ne sont pas réactives et donc trop grandes).

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 n'ai rien trouvé.

Edit: http://jsfiddle.net/cctyb/ - in Chrome ça fonctionne, dans FF l'image est trop grande

htmltwitter-bootstrapresponsive-designtwitter-bootstrap-3
16
Sonic750

ajouter .img-responsive{width:100%;} à votre css, voir aussi: Pourquoi Firefox et Opera ignorent-ils la largeur max à l'intérieur de display: table-cell?

22
Bass Jobsen

J'ai aussi eu ce problème, la solution pour moi était "mise en page fixe"

.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>
16
Dieter Casier

La réponse de Bass

.img-responsive {
   width:100%;
}

fonctionne, mais il met également à l'échelle d'autres images.

Ce que j'ai fait à la place, c'est créer une autre classe

.img-responsive-2 { 
   width: 100%; 
}

et l'assembler avec l'original .img-responsive pour que je puisse l'utiliser uniquement pour les images dans les tableaux.

<img src="someimage.jpg" class="img-responsive img-responsive-2" />
3
malnosna

Essayez ce code

$(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();
    });
});
0
user3648328