Tại sao flexbox kéo dài hình ảnh của tôi thay vì giữ lại tỷ lệ khung hình?

Flexbox có hành vi này trong đó nó kéo dài hình ảnh đến chiều cao tự nhiên của chúng. Nói cách khác, nếu tôi có một hộp chứa flexbox với hình ảnh con và tôi thay đổi kích thước chiều rộng của hình ảnh đó, chiều cao hoàn toàn không thay đổi kích thước và hình ảnh bị kéo dài.

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>

Điều gì gây ra điều này?

Tôi đã thêm CodePen này để chứng minh điều tôi muốn nói.

Nó được kéo dài bởi vì align-selfgiá trị mặc định là stretch. Đặt align-selfthành center.

align-self: center;

Xem tài liệu ở đây: align-self

Thuộc tính chính là 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>

Tôi đã đối mặt với cùng một vấn đề với một menu Foundation. align-self: center;không làm việc cho tôi.

Giải pháp của tôi là bọc hình ảnh bằng một <div style="display: inline-table;">...</div>

Thêm vào marginđể căn chỉnh hình ảnh:

Vì chúng ta muốn imagetrở thành left-aligned, chúng tôi đã thêm:

img {
  margin-right: auto;
}

Tương tự cho imagelà right-aligned, chúng ta có thể thêm margin-right: auto;. Đoạn mã hiển thị bản demo cho cả hai loại căn chỉnh.

Chúc may mắn...

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>

Nó được kéo dài bởi vì giá trị mặc định align-self là kéo dài. Có hai giải pháp cho trường hợp này: 1. set img align-self: centre OR 2. set Parent align-items: centre

img {

   align-self: trung tâm
}

HOẶC LÀ

.cha mẹ {
  align-item: trung tâm
}