How to adjust the picture adaptation size through the object-fit of CSS3
This article mainly explains "how to adjust the picture adaptation size through CSS3's object-fit". The explanation in the article is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly and deeply, to study and learn "how to adjust the picture adaptation size through CSS3's object-fit"!
CSS Code copies content to the clipboard
.image _ _ contain {
Object-fit: contain
}
.image _ _ fill {
Object-fit: fill
}
.image _ _ cover {
Object-fit: cover
}
.image _ _ scale-down {
Object-fit: scale-down
}
Center and crop the picture
Setting the cropping size of the image is very simple, you just need to use this line of code in CSS:
CSS Code copies content to the clipboard
Img {
Object-fit: cover
}
okay. There is no need for semantics, wrapper div or other meaningless code.
This technique can be used to cut the inappropriate size of the profile picture into a square or round picture. Take the wide picture of the bear below as an example. Once the object-fit:cover technology is applied to this kind of image, and the width and height are set, the image itself will be cropped and centered.
Thank you for your reading, the above is the content of "how to adjust picture adaptation size through CSS3 object-fit". After the study of this article, I believe you have a deeper understanding of how to adjust picture adaptation size through CSS3 object-fit. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
