CSS3 Flexbox поддерживает соотношение сторон изображения

Используя модель Flex flex, как я могу заставить изображение поддерживать его соотношение сторон?

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

Ответ 1

Для тегов img, если вы определяете одну сторону, другая сторона изменяется, чтобы сохранить пропорции и по умолчанию изображения расширяются до их первоначального размера.

Используя этот факт, если вы перенесите каждый тег img в тег div и установите его ширину на 100% от родительского div, высота будет соответствовать пропорции по вашему желанию.

http://jsfiddle.net/0o5tpbxg/

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

Ответ 2

Чтобы изображения не растягивались ни в одной оси внутри родителя flex, я нашел пару решений.

Вы можете попробовать использовать привязку к объекту на изображении, например,

object-fit: contain;

http://jsfiddle.net/ykw3sfjd/

Или вы можете добавить гибкие specfic правила, которые могут работать лучше в некоторых случаях.

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

Ответ 3

Не нужно добавлять содержащий div.

По умолчанию для свойства css "align-items" является "растяжка", что является причиной того, что ваши изображения будут растянуты до полной исходной высоты. Установка свойства css "align-items" в "flex-start" устраняет вашу проблему.

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

Ответ 4

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

Насколько я знаю, это работает не так, как ожидалось, если изображения, которые устанавливаются как прямые элементы гибкости с текущим модулем Flexible Box Layout Module Level 1.

См. Эти обсуждения, и сообщения об ошибках могут быть связаны:

Flexbugs # 14 - Внутренний размер Chrome/Flexbox не реализован правильно.
Firefox Bug 972595 - Контейнеры Flex должны использовать "flex-basis" вместо "width" для вычисления внутренней ширины гибких элементов
Chromium Issue 249112 - В Flexbox разрешите внутреннее соотношение сторон, чтобы сообщить о вычислении основного размера.

В качестве обходного пути вы можете обернуть каждый <img> с помощью <div> или <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>

Ответ 5

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

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

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

DEMO

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

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

Работает только в хромированном состоянии

Ответ 6

На самом деле я обнаружил, что для сохранения отношения изображения к контейнеру метки изображения требуется высота. напримеp >

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

то в вашем html контейнер упакует изображение тега

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

эта работа для IE и других браузеров

Ответ 7

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