Problem
Flexbox offers a feature that allows images to be stretched to their full height. To put it another way, if I have a flexbox container with a child picture and I adjust the width of that image, the height of that image does not resize at all, and the image is stretched.
What causes this?
Asked by sjbuysse
Solution #1
Because stretch is the default option for align-self, it is stretching. Set your self-alignment to the center.
align-self: center;
align-self documentation can be found here.
Answered by pradeep1991singh
Solution #2
align-self: center: is the most important property.
Answered by Dorian
Solution #3
With a Foundation menu, I had the same problem. It didn’t work for me when I used align-self: center.
My approach was to use a div style=”display: inline-table;”> to wrap the image. …
Answered by isapir
Solution #4
We added: because we wanted the image to be left-aligned.
img {
margin-right: auto;
}
Similarly, we can use margin-right: auto; to align the image to the right. Both forms of alignment are demonstrated in the excerpt.
Good Luck…
Answered by Aakash
Solution #5
When I was constructing my navigation bar, I ran into a similar problem, but none of the solutions previously worked for me.
My approach was to increase the image’s height by 100%.
If you want the items to be aligned horizontally, use width: 100 percent instead.
This value appears to be added by default now, but you’ll need to add it for compatibility reasons.
Answered by Jongwoo Lee
Post is based on https://stackoverflow.com/questions/37609642/why-does-flexbox-stretch-my-image-rather-than-retaining-aspect-ratio