by 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
Need a web developer? Maybe we can help, get in touch!