İkinci görüntüde görüntünün kutuyu doldurmasını istiyormuşsunuz gibi görünüyor, ancak oluşturduğunuz örnek en boy oranını koruyor (evcil hayvanlar ince veya şişman değil normal görünüyor).
Bu resimleri örnek olarak photoshop'ladıysanız ya da ikincisi de "nasıl olması gerektiği" konusunda hiçbir fikrim yok (ilk örnek "gerekir" derken IS dediniz)
Her neyse, varsaymak zorundayım:
"Görüntüler en boy oranını koruyarak yeniden boyutlandırılmazsa" ve bana piksellerin en boy oranını SAKLAYAN bir görüntü gösterirseniz, "kırpma" alanının en boy oranını elde etmeye çalıştığınızı varsaymalıyım. yeşil) WILE piksellerin en boy oranını korur. Yani, resmi büyüterek ve kırparak hücreyi resimle doldurmak istiyorsunuz.
Bu sizin sorununuzsa, sağladığınız kod "sorununuzu" DEĞİL, başlangıç örneğinizi yansıtmaktadır.
Önceki iki varsayım göz önüne alındığında, ihtiyacınız olan şey, kutunun yüksekliği dinamikse gerçek görüntülerle değil, arka plan görüntüleriyle başarılamaz. Ya "background-size: include" veya şu teknikleri kullanarak (istediğiniz herhangi bir yerde kırpmayı veya maksimum boyutları sınırlayan yüzdelerde akıllı dolgular):
http://fofwebdesign.co.uk/template/_testing/scale-img/scale- img.htm
Bunun resimlerle mümkün olmasının tek yolu, ikinci resminizi UNUTMAK ve hücrelerin sabit bir yüksekliğe sahip olması ve ŞİDDETLE, örnek resimlerinize bakılırsa, yüksekliğin aynı kalmasıdır!
Dolayısıyla, kabınızın yüksekliği değişmezse ve görsellerinizi kare tutmak istiyorsanız, görsellerin maksimum yüksekliğini bilinen değere (eksi dolgular veya kenarlıklar, kutunun kutu boyutlandırma özelliğine bağlı olarak) ayarlamanız yeterlidir. hücreler)
Bunun gibi:
<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>
Ve 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/
Kodunuz geçersiz (açılış etiketleri, kapatmak yerine etiketlerdir, bu nedenle kardeşleri değil NESTED hücreleri çıkarırlar, resimlerinizin bir SCREENSHOT'ını hatalı kodun içinde kullandı ve esnek kutusu hücreleri değil, her iki örneği de bir sütunda tutuyor ( "satır" ayarladınız, ancak bir hücreyi diğerinin içine yerleştiren bozuk kod, esnekliğin içinde bir esneklikle sonuçlandı ve sonunda COLUMNS olarak çalışıyor. Neyi başarmak istediğiniz ve bu kodu nasıl oluşturduğunuz hakkında hiçbir fikrim yok, ama ben Ne istediğini tahmin ediyorum.
Görüntüyü ekledim: hücrelere de esnetin, böylece görüntü ortalanır (bence display: tabletüm bu işaretlemeyle burada da kullanılabilirdi)
