Как с помощью модели гибкого бокса CSS заставить изображение сохранять свое соотношение сторон?

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 972595 - контейнеры Flex должны использовать «flex- base » вместо «width» для вычисления внутренней ширины гибких элементов.
• 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 Предполагаемый минимальный размер гибких элементов

Чтобы обеспечить более разумный минимальный размер по умолчанию для гибких элементов , эта спецификация вводит новое значение auto в качестве начального значения свойств min-width и min-height, определенных в 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>

В последнее время я играл с flexbox, и я пришел к решению этой проблемы путем экспериментов и следующих рассуждений. Однако на самом деле я не уверен, что происходит именно так.

Если на реальную ширину влияет гибкая система. Таким образом, после того, как ширина элементов достигает максимальной ширины родительского элемента, дополнительная ширина, установленная в css, игнорируется. Тогда безопасно установить ширину на 100%.

Поскольку высота тега img зависит от самого изображения, установка высоты на 0% может кое-что сделать. (здесь я не понимаю, что ... но для меня имело смысл исправить это)

DEMO

(помните, что впервые увидел это здесь!)

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

Работает пока только в хроме

Это ожидаемое поведение. flex-контейнер по умолчанию растягивает всех своих дочерних элементов. Изображение не исключение. (т.е. у родителя будет align-items: stretchсобственность)

Чтобы сохранить соотношение сторон, есть два решения:

1. Либо замените align-items: stretchсвойство по умолчанию на align-items: flex-startили align-self: centerт.д., http://jsfiddle.net/e394Lqnt/3/

или

2. Установите свойство align исключительно для самого дочернего элемента: like, 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. Это сохранит соотношение сторон, в то время как align-content не сохранит соотношение сторон.