Disable Flexbox Image Stretch

CSSPosted on

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;


Need a web developer? Maybe we can help, get in touch!

Similar Posts

More content in CSS category