Responsive Bilder mit verschiedenen Seitenverhältnissen auf die gleiche Höhe machen

Question

Ich versuche einen Weg zu finden, eine reaktionsfähige Reihe von Bildern auf die gleiche Höhe zu bringen, unabhängig vom Seitenverhältnis jedes Bildes oder der Breite des Containers. Die eigentlichen Bilddateien haben die gleiche Höhe, variieren jedoch in der Breite. Das Problem ist, dass, wenn der Behälter kleiner wird, an bestimmten Breiten Rundungsfehler Bilder verursacht ein Pixel oder zwei verschiedene in der Höhe sein. Hier ist eine Geige http://jsfiddle.net/chris_tsongas/vj2rfath/, die Größe der Ergebnisbereich, und Sie werden bei einigen Breiten sehen die Bilder sind nicht mehr die gleiche Höhe aufweisen.

Ich bin Styling Inhalt von einem CMS so minimal Kontrolle über das Markup hat, und hat ein Mandat css nur zu verwenden, anstatt js. Ich habe versucht, die Einstellung der Bildhöhe auf 100%, aber das macht nur das Bild um 100% seiner ursprünglichen Größe, nicht 100% der Behälterhöhe. Hier ist das HTML und CSS von der Geige oben verlinkten:

<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

Sie wollen das Bild, um Stil, die im Inneren der Zelle ist, und beschränken es auf die Zellengröße, so dass Sie sich ändern müssen:

img { 
    max-width:100% 
} 

zu

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

Updated Fiddle

Sie können immer noch alles, was Sie an den Tisch wollen, aber Dadurch bleiben die Bilder auf der gleichen Höhe.