En la segunda imagen, parece que desea que la imagen llene el cuadro, pero el ejemplo que creó SÍ mantiene la relación de aspecto (las mascotas se ven normales, no delgadas ni gordas).
No tengo ni idea de si hiciste photoshop de esas imágenes como ejemplo o si la segunda es "cómo debería ser" también (dijiste SI, mientras que en el primer ejemplo dijiste "debería")
De todos modos, tengo que asumir:
Si "las imágenes no se redimensionan manteniendo la relación de aspecto" y me muestra una imagen que SÍ mantiene la relación de aspecto de los píxeles, debo asumir que está tratando de lograr la relación de aspecto del área de "recorte" (el interior de el verde) MIENTRAS mantiene la relación de aspecto de los píxeles. Es decir, desea llenar la celda con la imagen, agrandando y recortando la imagen.
Si ese es su problema, el código que proporcionó NO refleja "su problema", sino su ejemplo inicial.
Dadas las dos suposiciones anteriores, lo que necesita no se puede lograr con imágenes reales si la altura de la caja es dinámica, pero con imágenes de fondo. Ya sea utilizando "background-size: contener" o estas técnicas (rellenos inteligentes en porcentajes que limitan el recorte o los tamaños máximos en cualquier lugar que desee):
http://fofwebdesign.co.uk/template/_testing/scale-img/scale- img.htm
La única forma en que esto es posible con las imágenes es si nos OLVIDAMOS de su segunda imagen, y las celdas tienen una altura fija, y AFORTUNADA, a juzgar por sus imágenes de muestra, ¡la altura permanece igual!
Entonces, si la altura de su contenedor no cambia y desea mantener sus imágenes cuadradas, solo tiene que establecer la altura máxima de las imágenes en ese valor conocido (menos rellenos o bordes, según la propiedad de tamaño de caja del células)
Me gusta esto:
<div class="content">
<div class="row">
<div class="cell">
<img src="http://lorempixel.com/output/people-q-c-320-320-2.jpg"/>
</div>
<div class="cell">
<img src="http://lorempixel.com/output/people-q-c-320-320-7.jpg"/>
</div>
</div>
</div>
Y el CSS:
.content {
background-color: green;
}
.row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
flex-direction: row;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
align-items: center;
}
.cell {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
padding: 10px;
border: solid 10px red;
text-align: center;
height: 300px;
display: flex;
align-items: center;
box-sizing: content-box;
}
img {
margin: auto;
width: 100%;
max-width: 300px;
max-height:100%
}
http://jsfiddle.net/z25heocL/
Su código no es válido (las etiquetas de apertura son en lugar de las de cierre, por lo que generan celdas NESTED, no hermanos, usó una CAPTURA DE PANTALLA de sus imágenes dentro del código defectuoso, y el cuadro flexible no contiene las celdas sino ambos ejemplos en una columna ( configuraste "fila", pero el código corrupto que anidaba una celda dentro de la otra resultó en una flexión dentro de una flexión, que finalmente funcionó como COLUMNAS. No tengo idea de lo que querías lograr y cómo se te ocurrió ese código, pero ' Supongo que lo que quieres es esto.
También agregué display: flex a las celdas, por lo que la imagen se centra (creo que display: tablepodría haberse usado aquí también con todo este marcado)
