Immagini reattive nelle tabelle (bootstrap 3)

Sto usando Bootstrap 3 Framework e ho qualche problema con la class “img-responsive” in Firefox. Ho un tavolo a 4 colonne con layout 15/50/10/25%. Nella prima colonna c’è un’immagine grande, che dovrebbe essere ridimensionata al 15%. Ma funziona solo in Chrome / Opera, ma non in FF / IE (le immagini non sono reattive e quindi troppo grandi).

Il mio codice:

Bezeichnung Zeitraum Ort

ABC

555 XYZ

Si tratta di un problema noto in BS3? Non ho trovato nulla.

Modifica: http://jsfiddle.net/cctyb/ – in Chrome funziona, in FF l’immagine è troppo grande

aggiungi .img-responsive{width:100%;} al tuo css, guarda anche: Perché Firefox e Opera ignorano la larghezza massima all’interno del display: table-cell?

Ho anche avuto questo problema, la soluzione per me era “layout di tabella fisso”

 .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%; } } 
myimage

La risposta di Bass

 .img-responsive { width:100%; } 

funziona, ma ridimensiona anche altre immagini.

Quello che ho fatto invece è creare un’altra class come

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

e mettilo insieme all’originale .img-responsive modo da avere la flessibilità di usarlo solo per le immagini nelle tabelle.

  

Prova questo codice

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

Il mio css personalizzato:

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