Why does flexbox stretch my image rather than retaining aspect ratio

Question

Flexbox has this behaviour where it stretches images to their natural height  In other words  if I have a flexbox container with a child image  and I resize the width of that image  the height doesn t resize at all and the image gets stretched    x000D   x000D  div   x000D    display  flex   x000D    flex-wrap  wrap  x000D    x000D  img   x000D    width  50  x000D    x000D   lt div gt  x000D       lt img src  https   loremflickr com 400 300   gt  x000D       lt h4 gt Appify lt  h4 gt  x000D       lt p gt  some text  lt  p gt  x000D   lt  div gt  x000D   x000D   x000D    What causes this   I added This CodePen to demonstrate what I mean

User · Answer

It is stretching because align-self default value is stretch. there is two solution for this case : 1. set img align-self : center OR 2. set parent align-items : center

img {

   align-self: center
}

OR

.parent {
  align-items: center
}

User · Answer

Adding margin to align images   Since we wanted the image to be left-aligned  we added   img     margin-right  auto      Similarly for image to be right-aligned  we can add margin-right  auto    The snippet shows a demo for both types of alignment   Good Luck      x000D   x000D  div   x000D    display flex   x000D    flex-direction column  x000D    border  2px black solid  x000D    x000D   x000D  h1   x000D    text-align  center  x000D    x000D  hr   x000D    border  1px black solid  x000D    width  100  x000D    x000D  img one   x000D    margin-right  auto  x000D    x000D   x000D  img two   x000D    margin-left  auto  x000D    x000D   lt div gt  x000D     lt h1 gt Flex Box lt  h1 gt  x000D     x000D     lt hr   gt  x000D     x000D     lt img src  https   via placeholder com 80x80  class  one   x000D      gt  x000D     x000D     x000D     lt img src  https   via placeholder com 80x80  class  two   x000D      gt  x000D     x000D     lt hr   gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I faced the same issue with a Foundation menu   align-self  center  didn t work for me   My solution was to wrap the image with a  lt div style  display  inline-table   gt     lt  div gt

User · Answer

The key attribute is align-self  center    x000D   x000D   container   x000D    display  flex  x000D    flex-direction  column  x000D    x000D   x000D  img   x000D    max-width  100   x000D    x000D   x000D  img align-self   x000D    align-self  center  x000D    x000D   lt div class  container  gt  x000D       lt p gt Without align-self  lt  p gt  x000D       lt img src  http   i imgur com NFBYJ3hs jpg    gt  x000D       lt p gt With align-self  lt  p gt  x000D       lt img class  align-self  src  http   i imgur com NFBYJ3hs jpg    gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

It is stretching because align-self default value is stretch  Set align-self to center   align-self  center    See documentation here  align-self

[html] Why does flexbox stretch my image rather than retaining aspect ratio?

Examples related to html

Examples related to css

Examples related to flexbox