Почему 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%
}

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

Ответ 1

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

align-self: center

Смотрите документ здесь: align-self

Ответ 2

Ключ 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>

Ответ 3

У меня возникла такая же проблема с меню Foundation. align-self: center; не работает для меня.

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

Ответ 4

Добавление `margin` для выравнивания изображений:

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

img {
  margin-right: auto;
}

Аналогично, чтобы image right-aligned по 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>

Ответ 5

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