CSS esnek kutu modelini kullanarak bir görüntüyü en boy oranını korumaya nasıl zorlayabilirim?

JS Fiddle: http://jsfiddle.net/xLc2Le0k/2/

Kabın genişliğini doldurmak için görüntülerin uzadığına veya küçüldüğüne dikkat edin. Sorun değil, ancak görüntü oranlarını korumak için yüksekliği uzatabilir veya kısaltabilir miyiz?

HTML

<div class="slider">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
</div>

CSS

.slider {
    display: flex;
}
.slider img {
    margin: 0 5px;
}

İmg etiketleri için bir tarafı tanımlarsanız, en boy oranını korumak için diğer taraf yeniden boyutlandırılır ve varsayılan olarak resimler orijinal boyutlarına genişler.

Bu gerçeği kullanarak, her img etiketini div etiketine sararsanız ve genişliğini üst div'in% 100'ü olarak ayarlarsanız, yükseklik, istediğiniz en boy oranına göre olacaktır.

http://jsfiddle.net/0o5tpbxg/

* {
    margin: 0;
    padding: 0;
}
.slider {
    display: flex;
}
.slider .slide img {
    width: 100%;
}

Görüntülerin bir flex üst öğe içinde her iki eksende uzamasını önlemek için birkaç çözüm buldum.

Görüntü üzerinde nesne sığdırmayı deneyebilirsiniz, örneğin

object-fit: contain;

http://jsfiddle.net/ykw3sfjd/

Ya da bazı durumlarda daha iyi çalışabilecek esnek özel kurallar ekleyebilirsiniz.

align-self: center;
flex: 0 0 auto;

İçeren bir div eklemeye gerek yok.

Css "align-items" özelliği için varsayılan "streç" dir, bu da resimlerinizin tam orijinal yüksekliğine uzatılmasına neden olur. Css "align-items" özelliğini "flex-start" olarak ayarlamak sorununuzu düzeltir.

.slider {
    display: flex;
    align-items: flex-start;  /* ADD THIS! */
}

İç boyutları olan , yani bir jpeggörüntü gibi doğal boyuttaki görüntülerin çoğu . Belirtilen boyut hem genişlik hem de yükseklikten birini tanımlıyorsa, eksik değer iç oran kullanılarak belirlenir ... - MDN'ye bakın .

Ancak, bildiğim kadarıyla , mevcut Esnek Kutu Düzeni Modülü Seviye 1 ile doğrudan esnek öğeler olarak ayarlanan resimler beklendiği gibi çalışmıyor .

Bu tartışmalara bakın ve hata raporları ilgili olabilir:

• Flexbugs # 14 - Chrome / Flexbox Intrinsic Sizing doğru şekilde uygulanmadı.
• Firefox Bug 972595 - Flex kapsayıcıları, esnek öğelerin iç genişliklerini hesaplamak için "genişlik" yerine "esnek tabanlı" kullanmalıdır
• Chromium Issue 249112 - Flexbox'ta, iç en boy oranlarının ana boyut hesaplamasını bilgilendirmesine izin verin.

Geçici bir çözüm olarak, her birini <img>a <div>veya a ile sarmalayabilirsiniz <span>.

jsFiddle

.slider {
  display: flex;
}

.slider>div {
  min-width: 0; /* why? see below. */
}

.slider>div>img {
  max-width: 100%;
  height: auto;
}

<div class="slider">
  <div><img src="https://picsum.photos/400/300?image=0" /></div>
  <div><img src="https://picsum.photos/400/300?image=1" /></div>
  <div><img src="https://picsum.photos/400/300?image=2" /></div>
  <div><img src="https://picsum.photos/400/300?image=3" /></div>
</div>

4.5 Zımni Minimum Esnek Öğe Boyutu

Esnek öğeler için daha makul bir varsayılan minimum boyut sağlamak için , bu belirtim CSS 2.1'de tanımlanan minimum genişlik ve minimum yükseklik özelliklerinin başlangıç ​​değeri olarak yeni bir otomatik değer sunar .

Alternatif tableolarak flexbox, IE8 için bile daha fazla tarayıcıda çalışacağı için benzer sonuçlar elde edeceğiniz CSS düzenini kullanabilirsiniz .

jsFiddle

.slider {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.slider>div {
  display: table-cell;
  vertical-align: top;
}

.slider>div>img {
  max-width: 100%;
  height: auto;
}

<div class="slider">
  <div><img src="https://picsum.photos/400/300?image=0" /></div>
  <div><img src="https://picsum.photos/400/300?image=1" /></div>
  <div><img src="https://picsum.photos/400/300?image=2" /></div>
  <div><img src="https://picsum.photos/400/300?image=3" /></div>
</div>

Son zamanlarda flexbox ile oynuyordum ve bunun için deneyler ve aşağıdaki mantıkla çözüme ulaştım. Ancak gerçekte tam olarak bunun olup olmadığından emin değilim.

Gerçek genişlik flex sistemden etkileniyorsa. Dolayısıyla, elemanların genişliği ebeveynin maksimum genişliğine ulaştıktan sonra, css'de ayarlanan ekstra genişlik yok sayılır. O zaman genişliği% 100 olarak ayarlamak güvenlidir.

İmg etiketinin yüksekliği resmin kendisinden türetildiği için, yüksekliğin% 0 olarak ayarlanması bir şeyler yapabilir. (burası ne olduğundan emin değilim ... ama düzeltmesi bana mantıklı geldi)

DEMO

(önce burada gördüğünü hatırla!)

.slider {
    display: flex;
}
.slider img {
    height: 0%;
    width: 100%;
    margin: 0 5px;
}

Henüz yalnızca Chrome'da çalışıyor

Bu davranış bekleniyor. flex container, varsayılan olarak tüm alt öğelerini uzatır . Görüntünün istisnası yoktur. (yani, ebeveynin align-items: stretchmülkü olacaktır )

En boy oranını korumak için iki çözümümüz var:

1. Varsayılan align-items: stretchözelliği, align-items: flex-startveya align-self: centervb. İle değiştirin , http://jsfiddle.net/e394Lqnt/3/

veya

2. Münhasıran çocuğa kendisine Seti align özelliği: gibi, align-self: centerya da align-self: flex-startvb http://jsfiddle.net/e394Lqnt/2/

Aslında, görüntünün oranını korumak için görüntü etiketinin kapsayıcısının bir yüksekliğe sahip olması gerektiğini öğrendim. örneğin>

.container{display:flex; height:100%;} img{width:100%;height:auto;}

sonra html'nizde, kapsayıcınız etiket resmini saracaktır

<div class="container"><img src="image.jpg" alt="image" /></div>

bu, IE ve diğer tarayıcılar için çalışır

Ben de aynı sorunu yaşadım. Öğelerinizi ortalamak için esnek hizalamayı kullanın. Bunun align-items: centeryerine kullanmanız gerekir align-content: center. Bu, en boy oranını korurken, hizalama içeriği en boy oranını korumaz.