Coder Perfect

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


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