Creazione di immagini reattive con proporzioni diverse della stessa altezza

Question

Sto cercando di capire come rendere una fila di immagini reattiva alla stessa altezza, indipendentemente dal rapporto di aspetto di ciascuna immagine o dalla larghezza del contenitore. I file di immagine reali hanno la stessa altezza, ma variano in larghezza. Il problema è che quando il contenitore diventa più piccolo, a determinati angoli gli errori di arrotondamento fanno sì che le immagini siano un pixel o due di altezza diversa. Ecco un violino http://jsfiddle.net/chris_tsongas/vj2rfath/, ridimensiona il riquadro dei risultati e vedrai ad alcune larghezze che le immagini non hanno più la stessa altezza.

Sto stilando il contenuto da un CMS in modo da avere un controllo minimo sul markup e ho il mandato di usare solo CSS piuttosto che js. Ho provato a impostare l'altezza dell'immagine al 100% ma ciò rende l'immagine solo al 100% della sua dimensione originale, non al 100% dell'altezza del contenitore. Ecco il codice html e css dal violino linkato sopra:

<div class="table"> 
    <div class="row"> 
     <div class="cell"> 
      <img src="http://placehold.it/600x400" /> 
     </div> 
     <div class="cell"> 
      <img src="http://placehold.it/300x400" /> 
     </div> 
    </div> 
</div> 

.table { 
    display: table; 
    width: 100%; 
} 
.row { 
    display: table-row; 
} 
.cell { 
    display: table-cell; 
} 
img { 
    max-width: 100%; 
} 

Answer 1

Si desidera per lo stile l'immagine che si trova all'interno della cellula, e vincolare alla dimensione delle celle, quindi è necessario cambiare:

img { 
    max-width:100% 
} 

a

.cell img { 
    height:50%; 
    width:auto /* This keeps the aspect ratio correct */ 
} 

Updated Fiddle

si può ancora fare quello che vuoi al tavolo, ma questo manterrà le immagini alla stessa altezza.