Почему flexbox растягивает мое изображение?

Flexbox имеет такое поведение, когда он растягивает изображения до их естественной высоты. Другими (более конкретными) словами, если у меня есть контейнер flexbox с дочерним изображением, и я изменяю ширину этого изображения, высота не изменяется вообще, и изображение растягивается.

<div>
    <img src="https://loremflickr.com/400/300" >
    <h4>Appify</h4>
    <p> some text </p>
</div>

И эта таблица стилей

div {
  display: flex; 
  flex-wrap: wrap;
}
img{ 
  width: 50%
}

я добавилЭтот коде чтобы продемонстрировать, что я имею в виду. Что вызывает это?

 blonfu03 июн. 2016 г., 20:25
Хорошо. Я изучаю это, но с изображениями по-разному работают в Chrome и других браузерах. Chrome не учитывает соотношение сторон, если вы не определяете высоту.
 Michael_B03 июн. 2016 г., 20:40
@blonfu, да. Несомненно, есть несоответствия браузера и более детальные уровни.
 Paran0a03 июн. 2016 г., 10:43
Также добавляем высоту: 100%; чтобы img исправил проблему, я хотел бы знать, почему он также растягивает изображение.
 Michael_B03 июн. 2016 г., 16:19
@blonfu, значение по умолчанию во всех браузерахalign-items: stretch / align-self: stretch, Если вы добавите рамку вокруг каждого элемента и удалитеwrapвы заметите, что все элементы растягиваются во всех браузерах:codepen.io/anon/pen/oLXBVx?editors=1100
 blonfu03 июн. 2016 г., 10:40
В Firefox и IE работает нормально. В Chrome вы можете исправить с помощьюalign-self:flex-start  на изображении. Я не знаю почему, может быть значение по умолчанию в Chrome - растянуть.

Ответы на вопрос(5)

Ключalign-self: center:

.container {
  display: flex;
  flex-direction: column;
}

img {
  max-width: 100%;
}

img.align-self {
  align-self: center;
}
<div class="container">
<p>Without align-self:</p>
<img src="http://i.imgur.com/NFBYJ3hs.jpg" />
<p>With align-self:</p>
<img class="align-self" src="http://i.imgur.com/NFBYJ3hs.jpg" />
</div>

Я столкнулся с той же проблемой с меню Foundation.align-self: center; не работал для меня

Мое решение состояло в том, чтобы обернуть изображение<div style="display: inline-table;">...</div>

 Will Hoskings18 мар. 2018 г., 07:05
Это о flexbox, хотя.

использовать блок отображения для изображения, которое существует внутри flex-контейнера

Добавлениеmargin выровнять изображения:

Так как мы хотелиimage бытьleft-alignedмы добавили:

img {
  margin-right: auto;
}

Аналогично дляimage бытьright-alignedмы можем добавитьmargin-right: auto;, Фрагмент показывает демонстрацию для обоих типов выравнивания.

Удачи...

div {
  display:flex; 
  flex-direction:column;
  border: 2px black solid;
}

h1 {
  text-align: center;
}
hr {
  border: 1px black solid;
  width: 100%
}
img.one {
  margin-right: auto;
}

img.two {
  margin-left: auto;
}
<div>
  <h1>Flex Box</h1>
  
  <hr />
  
  <img src="https://via.placeholder.com/80x80" class="one" 
  />
  
  
  <img src="https://via.placeholder.com/80x80" class="two" 
  />
  
  <hr />
</div>

Решение Вопроса

Это растягивается, потому чтоalign-self значение по умолчаниюstretch, Задаватьalign-self вcenter.

align-self: center

Смотрите документ здесь:выравнивать-я

 electrovir12 апр. 2019 г., 06:19
Вы также можете положитьalign-items: center (или какое-либо выравнивание, соответствующее вашим потребностям) на родителя.
 Allen Gingrich04 апр. 2018 г., 21:55
Поиск около 20 вопросов и ответов здесь, это единственный ответ, который надежно работает для этой проблемы.
 ÁngelBlanco17 окт. 2017 г., 14:22
Большое спасибо, это была проблема!
 blonfu03 июн. 2016 г., 11:29
Да, но другой браузер поддерживает соотношение сторон в изображениях. Chrome ни применяет flex-base в img
 toad05 апр. 2018 г., 10:45
Я думаюalign-self: start; может быть более сильным ответом, потому что изображения должны выровняться по вертикали к вершине своих контейнеров (не по центру), как любое другое бесстилевое изображение (без CSS). В любом случае, оба ответа исправляют растяжение. Так что, конечно, это зависит от того, чего хочет ОП - просто не получил это «вертикально центрированное» впечатление от поста ОП.
 cacoder02 авг. 2018 г., 13:54
Если вы не определили ширину изображения и оно находится во flex-контейнере, оно растянется до 100%.align-self: [flex-start, center...others] предотвратит получение изображения 100% ширины flex-контейнеров.align-self:center исправляет это, конечно, но если вы хотите, чтобы ваше изображение начиналось с начала или конца использования контейнераalign-items: flex-start or flex-end

Ваш ответ на вопрос