Dimensionar automaticamente a imagem na disposição da FlexBox CSS e manter as proporções?

.myFlexedImage {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

É melhor experimentar a nova e simples funcionalidade CSS3:

img { 
  object-fit: contain;
}

Ele preserva a proporção de imagem (como quando você usa o truque de imagem de fundo), e no meu caso funcionou bem para o mesmo problema.

Tenha cuidado, porém, não é suportado pelo IE (veja os detalhes do suporte aqui).

Sugiro que se investigue as opções {[[0]} para ajustar o tamanho da imagem.

Em vez de ter a imagem na página se a tiver definida como uma imagem de fundo, poderá definir:

background-size: contain

Ou

background-size: cover

Estas opções têm em conta tanto a altura como a largura ao dimensionar a imagem. Isto vai funcionar na IE9 e em todos os outros navegadores recentes.

Na segunda imagem, parece que quer que a imagem preencha a caixa, mas o exemplo que criou mantém a proporção de aspecto (os animais parecem normais, não magros ou gordos).

Eu Não tenho nenhuma pista se você photoshopou essas imagens como exemplo ou o segundo é "como deve ser" também (você disse É, enquanto o primeiro exemplo que você disse "deve")

Se "as imagens não forem dimensionadas mantendo a proporção de aspecto" e você me mostrar uma imagem que faz mantenha a proporção de aspecto dos pixels, eu tenho que assumir que você está tentando realizar a proporção de aspecto da área "croping" (o interior do verde) WILE mantendo a proporção de aspecto dos pixels. Ou seja, você quer encher a célula com a imagem, ampliando e cortando a imagem.

Se esse é o seu problema, o código que forneceu não reflecte "o seu problema", mas o 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 é dinâmica, mas com imagens de fundo. Ou usando "Tamanho de fundo: conter" ou estas técnicas (paddings inteligentes em percentagens que limitam o corte ou tamanhos máximos em qualquer lugar que você quiser): http://fofwebdesign.co.uk/template/_testing/scale-img/scale-img.htm

A única maneira de isto ser possível com imagens é se esquecermos a tua segunda imagem, e as células tiverem uma altura fixa, e felizmente, a julgar pelas tuas imagens de amostra, a altura permanece a mesma!

Então, se a altura do seu contentor não mudar, e quiser manter as suas imagens quadradas, basta definir a altura máxima das imagens para esse valor conhecido (menos as placas ou contornos, dependendo da propriedade de box-dimensionamento das células)

<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/

O seu código é inválido (as marcas de abertura são em vez de as fechar, por isso eles produzem células aninhadas, não irmãos, ele usou um Imagem de suas imagens dentro do código defeituoso, e a caixa de flexão não está segurando as células, mas ambos os exemplos em uma coluna (você configurar "linha", mas o código corrupto nidificando uma célula dentro da outra resultou em um flex dentro de uma flex, finalmente trabalhando como colunas. Não faço ideia do que querias alcançar, e como inventaste esse código, mas acho que o que queres é isto.

Eu adicionei display: flex às células também, para que a imagem fique centrada (eu acho que display: table poderia ter sido usado aqui assim como com toda esta marcação)

HTML:

<div class="container">
    <div class="box">
        <img src="http://lorempixel.com/1600/1200/" alt="">
    </div>
</div>

CSS:

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;

  width: 100%;
  height: 100%;

  border-radius: 4px;
  background-color: hsl(0, 0%, 96%);
}

.box {
  border-radius: 4px;
  display: flex;
}

.box img {
  width: 100%;
  object-fit: contain;
  border-radius: 4px;
}

Estou a usar jquery ou vw para manter o rácio

Jquery

function setSize() {
    var $h = $('.cell').width();
    $('.your-img-class').height($h);
}
$(setSize);
$( window ).resize(setSize); 

Vw

 .cell{
    width:30vw;
    height:30vw;
}
.cell img{
    width:100%;
    height:100%;
}