Nella seconda immagine sembra che tu voglia che l'immagine riempia il riquadro, ma l'esempio che hai creato MANTIENE le proporzioni (gli animali sembrano normali, non magri o grassi).
Non ho idea se hai photoshoppato quelle immagini come esempio o anche il secondo è "come dovrebbe essere" (hai detto È, mentre il primo esempio hai detto "dovrebbe")
Ad ogni modo, devo presumere:
Se "le immagini non vengono ridimensionate mantenendo le proporzioni" e mi mostri un'immagine che MANTIENE le proporzioni dei pixel, devo presumere che tu stia cercando di ottenere le proporzioni dell'area di "ritaglio" (l'interno di il verde) WILE mantenendo le proporzioni dei pixel. Cioè vuoi riempire la cella con l'immagine, ingrandendo e ritagliando l'immagine.
Se questo è il tuo problema, il codice che hai fornito NON riflette "il tuo problema", ma il tuo esempio di partenza.
Date le due ipotesi precedenti, ciò di cui hai bisogno non può essere realizzato con immagini reali se l'altezza della scatola è dinamica, ma con immagini di sfondo. O usando "background-size: contain" o queste tecniche (padding intelligenti in percentuali che limitano il ritaglio o le dimensioni massime ovunque tu voglia):
http://fofwebdesign.co.uk/template/_testing/scale-img/scale- img.htm
L'unico modo in cui ciò è possibile con le immagini è se DIMENTICIAMO la tua seconda iimage e le celle hanno un'altezza fissa e FORTUNATAMENTE, a giudicare dalle tue immagini campione, l'altezza rimane la stessa!
Quindi, se l'altezza del tuo contenitore non cambia e vuoi mantenere le tue immagini quadrate, devi solo impostare l'altezza massima delle immagini su quel valore noto (meno padding o bordi, a seconda della proprietà di dimensionamento del riquadro del cellule)
Come questo:
<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 il 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/
Il tuo codice non è valido (i tag di apertura sono invece di quelli di chiusura, quindi generano celle NESTED, non fratelli, ha usato uno SCREENSHOT delle tue immagini all'interno del codice difettoso e la scatola flessibile non contiene le celle ma entrambi gli esempi in una colonna ( hai impostato "riga" ma il codice corrotto che annida una cella all'interno dell'altra ha prodotto un flex all'interno di un flex, che alla fine funziona come COLUMNS. Non ho idea di cosa volevi ottenere e di come sei arrivato con quel codice, ma io ' Sto indovinando quello che vuoi è questo.
Ho aggiunto display: flex anche alle celle, quindi l'immagine viene centrata (penso che display: tableavrebbe potuto essere usato anche qui con tutto questo markup)
