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

html css flexbox
sjbuysse picture sjbuysse · Jun 3, 2016 · Viewed 104.4k times · Source

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.

What causes this?

I added This CodePen to demonstrate what I mean.

Answer

pradeep1991singh picture pradeep1991singh · Jun 3, 2016

It is stretching because align-self default value is stretch. Set align-self to center.

align-self: center;

See documentation here: align-self

Related questions

Flexbox: center horizontally and vertically

How to center div horizontally, and vertically within the container using flexbox. In below example, I want each number below each other (in rows), which are centered horizontally. http://codepen.io/anon/pen/zLxBo

Read More
How to align 3 divs (left/center/right) inside another div?

I want to have 3 divs aligned inside a container div, something like this: [[LEFT] [CENTER] [RIGHT]] Container div is 100% wide (no set width), and center div should remain in center after resizing the container. So I set: #container{width:100%;} #left{…

Read More
How to Right-align flex item?

Is there a more flexbox-ish way to right-align "Contact" than to use position: absolute? http://jsfiddle.net/vqDK9/

Read More