1
Disable Flexbox Image Stretch
source link: https://pineco.de/snippets/disable-flexbox-image-stretch/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Disable Flexbox Image Stretch
We use cookies for commenting and analytics. For more details, please visit our privacy page.
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
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK