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;
}

Reference

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

Looking for web dev job?
You can check them on Jooble.

To see and write comments, you must allow the related (Disqus) cookies. For more information, please visit our privacy policy page.

Similar Posts

More content in CSS category