Na segunda imagem, parece que você quer que a imagem preencha a caixa, mas o exemplo que você criou FAZ manter a proporção (os animais parecem normais, não são magros ou gordos).
Não tenho ideia se você fez o photoshop dessas imagens como exemplo ou se a segunda é "como deveria ser" também (você disse IS, enquanto no primeiro exemplo você disse "deveria")
De qualquer forma, devo assumir:
Se "as imagens não são redimensionadas mantendo a relação de aspecto" e você me mostra uma imagem que MANTEM a relação de aspecto dos pixels, devo assumir que você está tentando realizar a relação de aspecto da área de "recorte" (o interior de o verde) MANTENDO a proporção dos pixels. Ou seja, você deseja preencher a célula com a imagem, ampliando e cortando a imagem.
Se esse for o seu problema, o código fornecido NÃO reflete "seu problema", mas seu exemplo inicial.
Dadas as duas suposições anteriores, o que você precisa não pode ser realizado com imagens reais se a altura da caixa for dinâmica, mas com imagens de fundo. Usando "background-size: contain" ou estas técnicas (preenchimentos inteligentes em porcentagens que limitam o corte ou os tamanhos máximos em qualquer lugar que você quiser):
http://fofwebdesign.co.uk/template/_testing/scale-img/scale- img.htm
A única maneira de isso ser possível com imagens é ESQUECEREMOS sobre sua segunda imagem, e as células têm uma altura fixa, e FORTUNA, a julgar por suas imagens de amostra, a altura permanece a mesma!
Portanto, se a altura de seu contêiner não mudar e você quiser manter suas imagens quadradas, você só precisa definir a altura máxima das imagens para aquele valor conhecido (menos os preenchimentos ou bordas, dependendo da propriedade de tamanho da caixa do células)
Como isso:
<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>
E o 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/
Seu código é inválido (tags de abertura são em vez de de fechamento, então elas geram células NESTED, não irmãos, ele usou um SCREENSHOT de suas imagens dentro do código com defeito, e a caixa flexível não está segurando as células, mas os dois exemplos em uma coluna ( você configurou "linha", mas o código corrompido aninhando uma célula dentro da outra resultou em um flex dentro de um flex, finalmente funcionando como COLUNAS. Não tenho ideia do que você queria realizar e como surgiu com esse código, mas estou adivinhando o que você quer é isso.
Eu adicionei display: flex às células também, para que a imagem fique centralizada (acho que display: tablepoderia ter sido usada aqui também com toda essa marcação)
