Im zweiten Bild sieht es so aus, als ob Sie möchten, dass das Bild das Feld ausfüllt, aber das von Ihnen erstellte Beispiel behält das Seitenverhältnis bei (die Haustiere sehen normal aus, nicht schlank oder fett).
Ich habe keine Ahnung, ob Sie diese Bilder als Beispiel mit Photoshops versehen haben oder das zweite ist "wie es sein sollte" (Sie sagten IS, während das erste Beispiel "sollte" sagte).
Jedenfalls muss ich annehmen:
Wenn "die Größe der Bilder nicht unter Beibehaltung des Seitenverhältnisses geändert wird" und Sie mir ein Bild zeigen, das das Seitenverhältnis der Pixel beibehält, muss ich davon ausgehen, dass Sie versuchen, das Seitenverhältnis des "Zuschneide" -Bereichs (das Innere von) zu erreichen das Grün) WILE behält das Seitenverhältnis der Pixel bei. Das heißt, Sie möchten die Zelle mit dem Bild füllen, indem Sie das Bild vergrößern und zuschneiden.
Wenn dies Ihr Problem ist, spiegelt der von Ihnen angegebene Code NICHT "Ihr Problem" wider, sondern Ihr Startbeispiel.
Unter den beiden vorhergehenden Annahmen kann das, was Sie benötigen, nicht mit tatsächlichen Bildern erreicht werden, wenn die Höhe der Box dynamisch ist, sondern mit Hintergrundbildern. Entweder mithilfe von "Hintergrundgröße: Enthalten" oder diesen Techniken (intelligente Auffüllungen in Prozent, die das Zuschneiden begrenzen, oder die maximale Größe, wo immer Sie möchten):
http://fofwebdesign.co.uk/template/_testing/scale-img/scale- img.htm
Dies ist mit Bildern nur möglich, wenn wir Ihr zweites Bild VERGESSEN und die Zellen eine feste Höhe haben. Glücklicherweise bleibt die Höhe nach Ihren Beispielbildern gleich!
Wenn sich also die Höhe Ihres Containers nicht ändert und Sie Ihre Bilder quadratisch halten möchten, müssen Sie nur die maximale Höhe der Bilder auf diesen bekannten Wert einstellen (minus Auffüllungen oder Rahmen, abhängig von der Box-Size-Eigenschaft des Zellen)
So was:
<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>
Und das 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/
Ihr Code ist ungültig (öffnende Tags sind nicht schließende Tags, daher geben sie NESTED-Zellen aus, keine Geschwister. Er hat einen SCREENSHOT Ihrer Bilder im fehlerhaften Code verwendet, und die Flexbox enthält nicht die Zellen, sondern beide Beispiele in einer Spalte ( Sie haben "row" eingerichtet, aber der beschädigte Code, der eine Zelle in der anderen verschachtelt, führte zu einem Flex innerhalb eines Flex, der schließlich als COLUMNS fungierte. Ich habe keine Ahnung, was Sie erreichen wollten und wie Sie auf diesen Code gekommen sind, aber ich ' Ich vermute, was Sie wollen, ist dies.
Ich habe den Zellen auch display: flex hinzugefügt, damit das Bild zentriert wird (ich denke, display: tablees hätte auch hier mit all diesen Markups verwendet werden können).
