Dans la deuxième image, il semble que vous souhaitiez que l'image remplisse la case, mais l'exemple que vous avez créé conserve le rapport hauteur / largeur (les animaux ont l'air normaux, pas minces ou gros).
Je n'ai aucune idée si vous avez retravaillé ces images à titre d'exemple ou si la seconde est "comment ça devrait être" aussi (vous avez dit IS, tandis que le premier exemple vous avez dit "devrait")
Quoi qu'il en soit, je dois supposer:
Si "les images ne sont pas redimensionnées en conservant le rapport hauteur / largeur" et que vous me montrez une image qui garde le rapport hauteur / largeur des pixels, je dois supposer que vous essayez de réaliser le rapport hauteur / largeur de la zone de "recadrage" (l'intérieur de le vert) WILE en gardant le rapport hauteur / largeur des pixels. C'est-à-dire que vous souhaitez remplir la cellule avec l'image, en agrandissant et en recadrant l'image.
Si c'est votre problème, le code que vous avez fourni ne reflète PAS "votre problème", mais votre exemple de départ.
Compte tenu des deux hypothèses précédentes, ce dont vous avez besoin ne peut pas être accompli avec des images réelles si la hauteur de la boîte est dynamique, mais avec des images d'arrière-plan. Soit en utilisant "background-size: contain" ou ces techniques (rembourrages intelligents en pourcentages qui limitent le recadrage ou tailles max partout où vous le souhaitez):
http://fofwebdesign.co.uk/template/_testing/scale-img/scale- img.htm
La seule façon dont cela est possible avec des images est si nous OUBLIONS votre deuxième iimage et que les cellules ont une hauteur fixe, et FORTUNEMENT, à en juger par vos exemples d'images, la hauteur reste la même!
Donc, si la hauteur de votre conteneur ne change pas et que vous voulez garder vos images carrées, il vous suffit de définir la hauteur maximale des images sur cette valeur connue (moins les rembourrages ou les bordures, en fonction de la propriété de taille de la boîte du cellules)
Comme ça:
<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>
Et le 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/
Votre code n'est pas valide (les balises d'ouverture sont au lieu de fermer celles, donc elles produisent des cellules NESTED, pas des frères et sœurs, il a utilisé une capture d'écran de vos images à l'intérieur du code défectueux, et la boîte flexible ne contient pas les cellules mais les deux exemples dans une colonne ( vous configurez "row" mais le code corrompu imbriquant une cellule dans l'autre a entraîné un flex à l'intérieur d'un flex, fonctionnant finalement comme COLUMNS. Je n'ai aucune idée de ce que vous vouliez accomplir, et comment vous avez trouvé ce code, mais je ' m deviner ce que vous voulez est ceci.
J'ai ajouté display: flex aux cellules aussi, donc l'image est centrée (je pense qu'elle display: tableaurait pu être utilisée ici aussi avec tout ce balisage)
