Używając modelu CSS flex box, jak zmusić obraz do zachowania proporcji?

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

Zwróć uwagę, że obrazy rozciągają się lub kurczą, aby wypełnić szerokość pojemnika. W porządku, ale czy możemy też rozciągnąć lub zmniejszyć wysokość, aby zachować proporcje obrazu?

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;
}

W przypadku tagów img, jeśli zdefiniujesz jedną stronę, rozmiar drugiej strony zostanie zmieniony, aby zachować proporcje i domyślnie obrazy będą rozszerzane do ich oryginalnego rozmiaru.

Korzystając z tego faktu, jeśli zawiniesz każdy znacznik img w znacznik div i ustawisz jego szerokość na 100% nadrzędnego elementu div, wówczas wysokość będzie zgodna z proporcjami zgodnie z oczekiwaniami.

http://jsfiddle.net/0o5tpbxg/

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

Aby zapobiec rozciągnięciu obrazów w obu osiach wewnątrz elastycznego rodzica, znalazłem kilka rozwiązań.

Możesz spróbować dopasować obiekt do obrazu, który np

object-fit: contain;

http://jsfiddle.net/ykw3sfjd/

Lub możesz dodać reguły specyficzne dla flex, które mogą działać lepiej w niektórych przypadkach.

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

Nie ma potrzeby dodawania zawierającego div.

Domyślną właściwością css „align-items” jest „stretch”, co powoduje rozciąganie obrazów do pełnej pierwotnej wysokości. Ustawienie właściwości css „align-items” na „flex-start” rozwiązuje problem.

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

Większość obrazów ma wewnętrzne wymiary , czyli naturalny rozmiar, jak jpegobraz. Jeśli podany rozmiar definiuje jedną z szerokości i wysokości, brakująca wartość jest określana za pomocą wewnętrznego współczynnika ... - patrz MDN .

Ale to nie działa zgodnie z oczekiwaniami, jeśli obrazy, które są ustawiane jako bezpośrednie elementy flex z aktualnym modułem układu elastycznego pudełka na poziomie 1 , o ile wiem.

Zobacz te dyskusje, a raporty o błędach mogą być powiązane:

• Flexbugs # 14 - Rozmiar wewnętrzny Chrome / Flexbox nie został zaimplementowany poprawnie.
• Błąd przeglądarki Firefox 972595 - kontenery Flex powinny używać „podstawy elastycznej” zamiast „szerokości” do obliczania wewnętrznych szerokości elementów elastycznych
• Chromium Issue 249112 - W Flexbox, zezwalaj na wewnętrzne współczynniki kształtu, aby informować o obliczeniach głównego rozmiaru.

Aby obejść ten problem, możesz owinąć każdy <img>znak a <div>lub a <span>, lub tak.

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 Domniemany minimalny rozmiar elementów elastycznych

Aby zapewnić bardziej rozsądny domyślny rozmiar minimalny dla elementów elastycznych , ta specyfikacja wprowadza nową wartość auto jako początkową wartość właściwości min-width i min-height zdefiniowanych w CSS 2.1.

Alternatywnie możesz tablezamiast tego użyć układu CSS, co da podobne wyniki flexbox, ponieważ będzie działać na większej liczbie przeglądarek, nawet dla IE8.

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>

Ostatnio bawiłem się flexboksem i doszedłem do rozwiązania tego problemu poprzez eksperymenty i następujące rozumowanie. Jednak w rzeczywistości nie jestem pewien, czy dokładnie tak się dzieje.

Jeśli system flex ma wpływ na rzeczywistą szerokość. Więc po osiągnięciu maksymalnej szerokości elementu rodzica dodatkowa szerokość ustawiona w css jest ignorowana. Wtedy można bezpiecznie ustawić szerokość na 100%.

Ponieważ wysokość tagu img pochodzi z samego obrazu, ustawienie wysokości na 0% może coś zrobić. (tutaj nie jestem pewien, co ... ale dla mnie miało sens, że powinien to naprawić)

PRÓBNY

(pamiętaj, że zobaczyłem to najpierw tutaj!)

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

Działa jeszcze tylko w chromie

Takie zachowanie jest oczekiwane. flex container domyślnie rozciągnie wszystkie swoje elementy podrzędne. Obraz nie ma wyjątku. (tj. rodzic będzie miał align-items: stretchwłasność)

Aby zachować proporcje, mamy dwa rozwiązania:

1. Albo zamień align-items: stretchwłaściwość domyślną na align-items: flex-startlub align-self: centeritp., Http://jsfiddle.net/e394Lqnt/3/

lub

2. Ustaw właściwość align wyłącznie do samego dziecka: jak, align-self: centerlub align-self: flex-startitp http://jsfiddle.net/e394Lqnt/2/

Właściwie dowiedziałem się, że pojemnik z tagiem obrazu musi mieć wysokość, aby zachować proporcje obrazu. na przykład>

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

wtedy w twoim html twój kontener zawinie obraz tagu

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

to działa dla IE i innych przeglądarek

Po prostu miałem ten sam problem. Użyj wyrównania flex, aby wyśrodkować elementy. Musisz użyć align-items: centerzamiast align-content: center. Pozwoli to zachować proporcje, a align-content nie zachowa proporcji.