Na drugim obrazku wygląda na to, że chcesz, aby obraz wypełnił pole, ale utworzony przykład ZACHOWAJE proporcje (zwierzęta wyglądają normalnie, nie są szczupłe ani grube).
Nie mam pojęcia, czy jako przykład wykonałeś obróbkę zdjęć w Photoshopie, czy też drugi to „jak powinno być” (powiedziałeś, że jest, podczas gdy w pierwszym przykładzie powiedziałeś „powinno”)
W każdym razie muszę założyć:
Jeśli „obrazy nie są zmieniane z zachowaniem współczynnika proporcji” i pokazujesz mi obraz, który ZACHOWUJE proporcje pikseli, muszę założyć, że próbujesz osiągnąć proporcje obszaru „przycinania” (wewnętrzna część zielony) WILE z zachowaniem proporcji pikseli. Oznacza to, że chcesz wypełnić komórkę obrazem, powiększając i przycinając obraz.
Jeśli to jest twój problem, kod, który podałeś NIE odzwierciedla "twojego problemu", ale twój przykład początkowy.
Biorąc pod uwagę poprzednie dwa założenia, to, czego potrzebujesz, nie może zostać osiągnięte za pomocą rzeczywistych obrazów, jeśli wysokość ramki jest dynamiczna, ale z obrazami tła. Albo za pomocą „background-size: include” lub tych technik (inteligentne dopełnienia w procentach, które ograniczają kadrowanie lub maksymalne rozmiary w dowolnym miejscu):
http://fofwebdesign.co.uk/template/_testing/scale-img/scale- img.htm
Jedynym sposobem, w jaki jest to możliwe w przypadku obrazów, jest to, że ZAPOMNIAMY o twoim drugim iimage, a komórki mają stałą wysokość, a NA PEWNO, sądząc po przykładowych obrazach, wysokość pozostaje taka sama!
Więc jeśli wysokość twojego kontenera się nie zmienia i chcesz, aby twoje obrazy były kwadratowe, wystarczy ustawić maksymalną wysokość obrazów na tę znaną wartość (minus wypełnienia lub obramowania, w zależności od właściwości rozmiaru pola komórki)
Lubię to:
<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>
Oraz 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/
Twój kod jest nieprawidłowy (tagi otwierające są zamiast tagów zamykających, więc wyświetlają komórki ZAGNIEŻDŻONE, a nie rodzeństwo, użył ZRZUTU EKRANU twoich obrazów wewnątrz wadliwego kodu, a pole flex nie zawiera komórek, ale oba przykłady w kolumnie ( ustawiłeś "wiersz", ale uszkodzony kod zagnieżdżający jedną komórkę wewnątrz drugiej spowodował powstanie flexu wewnątrz flex, w końcu działając jako KOLUMNY. Nie mam pojęcia, co chciałeś osiągnąć i jak wymyśliłeś ten kod, ale ja ' Zgaduję, czego chcesz, to jest to.
Dodałem display: flex do komórek, więc obraz zostanie wyśrodkowany (myślę, że display: tablemożna by było użyć tutaj również z tymi wszystkimi znacznikami)
