Disable Flexbox Image Stretch

If you have a flexbox container which contains an image the default value for align-self is stretch.

This can be a problem because your image will stretch to its container if the container is more significant than the picture. Using align-self property, we can override the parent align-items value on specific child elements.

To solve this problem all, you have to do to is to set the align-self to center or any other value than stretch.

.flexbox-container img {
    align-self: center;
}

See the Pen
Disable Flexbox Image Stretch by Adam Laki (@adamlaki)
on CodePen.

Reference

• align-items
• align-self