Використовуючи модель CSS flex box, як я можу змусити зображення підтримувати його співвідношення сторін?

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

Зауважте, що зображення розтягуються або зменшуються, щоб заповнити ширину контейнера. Це добре, але чи можемо ми його також розтягнути або зменшити висоту, щоб зберегти пропорції зображення?

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

Для тегів img, якщо ви визначаєте одну сторону, то інша сторона змінює розмір, щоб зберегти співвідношення сторін, а зображення за замовчуванням розширити до початкового розміру.

Використовуючи цей факт, якщо ви загортаєте кожен тег img у тег div та встановлюєте його ширину на 100% від батьківського div, то висота буде залежати від пропорції, як ви хотіли.

http://jsfiddle.net/0o5tpbxg/

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

Щоб зображення не розтягувались по будь-якій осі всередині гнучкої батьківки, я знайшов пару рішень.

Ви можете спробувати скористатися об'єктом на зображенні, яке, наприклад

object-fit: contain;

http://jsfiddle.net/ykw3sfjd/

Або ви можете додати специфічні правила, які можуть працювати краще в деяких випадках.

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

Не потрібно додавати містити div.

За замовчуванням для властивості css "align-items" є "stretch", що спричиняє розтягнення ваших зображень на повну оригінальну висоту. Встановлення властивості css "align-items" на "flex-start" виправляє вашу проблему.

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

Більшість зображень із внутрішніми розмірами , тобто природного розміру, як jpegзображення. Якщо вказаний розмір визначає одну з ширини та висоти, відсутнє значення визначається за допомогою внутрішнього співвідношення ... - див. MDN .

Але це не працює, як очікувалося, якщо зображення, які встановлюються як прямі гнучкі елементи з поточним модулем гнучкої компоновки, рівень 1 , наскільки я знаю.

Дивіться ці дискусії та звіти про помилки, можливо, пов’язані:

• Flexbugs №14 - Внутрішній розмір Chrome / Flexbox не виконано правильно.
• Firefox Bug 972595 - Flex контейнери повинні використовувати "flex-основу" замість "width" для обчислення внутрішньої ширини flex елементів
• Chromium Issue 249112 - У Flexbox дозволяйте внутрішнім співвідношенням сторін повідомляти обчислення основного розміру.

Як вирішення, ви можете обгорнути кожен <img>із символів a <div>чи a <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 Мінімальний розмір гнучких елементів

Щоб забезпечити більш розумний мінімальний розмір за замовчуванням для гнучких елементів , ця специфікація вводить нове значення авто як початкове значення властивостей мінімальної ширини та мінімальної висоти, визначених у CSS 2.1.

Крім того, ви можете використовувати tableмакет CSS , на який ви отримаєте подібні результати, оскільки flexboxвін буде працювати в більшості браузерів, навіть для 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>

Я граю навколо флексбоксу останнім часом, і я прийшов до вирішення цього за допомогою експериментів та наступних міркувань. Однак насправді я не впевнений, що саме так і відбувається.

Якщо на реальну ширину впливає система flex. Тож після ширини елементів, що потрапляють на максимальну ширину батьківського, додаткова ширина, встановлена ​​в css, ігнорується. Тоді безпечно встановити ширину на 100%.

Оскільки висота тегу img походить із самого зображення, то встановлення висоти 0% може щось зробити. (саме тут мені незрозуміло, що ... але мені було сенс, що слід це виправити)

DEMO

(пам’ятайте, це бачили тут першими!)

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

Поки працює лише в хромі

Така поведінка очікувана. гнучкий контейнер розтягне всіх своїх дітей за замовчуванням. Зображення не є винятком. (тобто батьків матимеalign-items: stretch майно)

Для збереження співвідношення сторін у нас є два рішення:

1. Або замініть align-items: stretchвластивість за замовчуванням на align-items: flex-startабо align-self: centerінше, http://jsfiddle.net/e394Lqnt/3/

або

2. Встановити властивість Align виключно сам дитина: як, align-self: centerабо і align-self: flex-startт.д. http://jsfiddle.net/e394Lqnt/2/

Насправді я з’ясував, що контейнер тегу зображення повинен мати висоту, щоб зберегти співвідношення зображення. наприклад>

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

то у ваш HTML ваш контейнер буде загортати зображення тегу

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

ця робота для IE та інших браузерів

У мене просто було те саме питання. Використовуйте гнучку вирівнювання для центрування елементів. Ви повинні використовувати align-items: centerзамість align-content: center. Це дозволить підтримувати співвідношення сторін, тоді як вміст вирівнювання не буде зберігати співвідношення сторін.