Pada gambar kedua sepertinya Anda ingin gambar mengisi kotak, tetapi contoh yang Anda buat TIDAK mempertahankan rasio aspek (hewan peliharaan terlihat normal, tidak kurus atau gemuk).
Saya tidak tahu apakah Anda mem-photoshop gambar itu sebagai contoh atau yang kedua adalah "bagaimana seharusnya" juga (Anda mengatakan IS, sedangkan contoh pertama Anda mengatakan "harus")
Bagaimanapun, saya harus berasumsi:
Jika "gambar tidak diubah ukurannya dengan menjaga rasio aspek" dan Anda menunjukkan gambar yang TIDAK mempertahankan rasio aspek piksel, saya harus berasumsi bahwa Anda mencoba mencapai rasio aspek dari area "pemotongan" (bagian dalam hijau) WILE menjaga rasio aspek piksel. Yaitu Anda ingin mengisi sel dengan gambar, dengan memperbesar dan memotong gambar.
Jika itu masalah Anda, kode yang Anda berikan TIDAK mencerminkan "masalah Anda", tetapi contoh awal Anda.
Mengingat dua asumsi sebelumnya, apa yang Anda butuhkan tidak dapat dicapai dengan gambar aktual jika ketinggian kotak dinamis, tetapi dengan gambar latar belakang. Baik dengan menggunakan "background-size: contains" atau teknik berikut (smart paddings dalam persen yang membatasi cropping atau ukuran maksimal dimanapun Anda inginkan):
http://fofwebdesign.co.uk/template/_testing/scale-img/scale- img.htm
Satu-satunya cara hal ini dimungkinkan dengan gambar adalah jika kita LUPA tentang gambar kedua Anda, dan sel memiliki ketinggian tetap, dan SECARA TERLALU, dilihat dari gambar sampel Anda, tingginya tetap sama!
Jadi jika tinggi wadah Anda tidak berubah, dan Anda ingin menjaga gambar tetap persegi, Anda hanya perlu menyetel tinggi maksimal gambar ke nilai yang diketahui (dikurangi bantalan atau batas, tergantung pada properti ukuran kotak dari sel)
Seperti ini:
<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>
Dan 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/
Kode Anda tidak valid (tag pembuka bukan penutup, jadi mereka mengeluarkan sel NESTED, bukan saudara kandung, dia menggunakan SCREENSHOT gambar Anda di dalam kode yang salah, dan kotak fleksibel tidak menahan sel tetapi kedua contoh di kolom ( Anda mengatur "baris" tetapi kode korup yang bersarang di satu sel di dalam yang lain menghasilkan sebuah flex di dalam sebuah flex, akhirnya bekerja sebagai COLUMNS. Saya tidak tahu apa yang ingin Anda capai, dan bagaimana Anda membuat kode itu, tapi saya ' Saya menebak apa yang Anda inginkan adalah ini.
Saya menambahkan display: flex ke sel juga, jadi gambarnya berada di tengah (saya pikir display: tablebisa digunakan di sini juga dengan semua markup ini)
