Чому flexbox розтягує мій образ, а не зберігає співвідношення сторін?

Flexbox має таку поведінку, коли він розтягує зображення до їх природного зросту. Іншими словами, якщо у мене є контейнер flexbox із дочірнім зображенням, і я змінюю його ширину, то висота зовсім не змінюється, і зображення розтягується.

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

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

Що це викликає?

Я додав цей CodePen, щоб продемонструвати, що я маю на увазі.

Він розтягується, оскільки align-selfзначення за замовчуванням є stretch. Набір align-selfдля center.

align-self: center;

Дивіться документацію тут: align-self

Ключовий атрибут 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>

Я зіткнувся з тим же питанням із меню Фонду. align-self: center;не працювало для мене.

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

Додавання 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>

Це розтягнення, оскільки значенням за замовчуванням для вирівнювання є розтягнення. Для цього випадку є два рішення: 1. встановити img align-self: center OR 2. set parent-elements-elements: center

img {

   вирівнювати-само: центр
}

АБО

чітко {
  вирівнювати-елементи: центр
}