Farklı boy oranlarına sahip duyarlı görüntüler yapma Aynı yükseklik

Question

Her görüntünün veya kabın genişliğinin en boy oranına bakılmaksızın, aynı yüksekliğe duyarlı bir resim dizisi oluşturmanın bir yolunu bulmaya çalışıyorum. Gerçek görüntü dosyaları aynı yüksekliktedir, ancak genişliğe göre değişir. Sorun, kap küçüldüğünde, belirli genişliklerde yuvarlama hataları, görüntülerin piksel veya iki farklı yükseklikte olmasına neden olmasıdır. İşte bir fiddle http://jsfiddle.net/chris_tsongas/vj2rfath/, sonuç bölmesini yeniden boyutlandırın ve bazı genişliklerde görüntülerin artık aynı yükseklikte olmadığını göreceksiniz.

Bir CMS'den içeriği biçimlendiriyorum, bu nedenle işaretlemede en az düzeyde kontrole sahibim ve js yerine yalnızca css kullanma yetkisine sahibim. Görüntü yüksekliğini% 100 olarak ayarlamayı denedim, ancak bu sadece görüntüyü kapsayıcının% 100'ü değil, orijinal boyutunun% 100'ü yapar.

<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

Sen hücrenin içinde olduğu imajını stil ve değiştirmek gerekir, böylece hücre boyutuna sınırlamak istiyorum: Burada yukarıda bağlantılı keman html ve css olan

img { 
    max-width:100% 
} 

için

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

Updated Fiddle

masaya istediğini hala yapabilirsiniz

ama Bu, görüntüleri aynı yükseklikte tutacaktır.