Introduction
The object-fit in Css is mainly applied to the img tag and Video tag to control the display zoom effect.
First we have a picture, the size of the original picture is 1080px x 600px, the display effect is as follows:
If the img size setting in our css style cannot meet the original size of the image, for example, our img style is as follows:
<style type="text/css">
img {
width: 400px;
height: 600px;
}
</style>
Then the display effect is:
At this time, the effect picture is scaled. In order to display the effect, object-fit is needed to scale the picture size:
style
1. object-fit: cover;
The image maintains the aspect ratio and fills the given size, but the image will be cropped to fit the given aspect ratio, and will be cropped from the middle if the image is too large.
<style type="text/css">
img {
width: 400px;
height: 600px;
object-fit: cover;
}
</style>
The display effect is:
2. object-fit: contain;
Keep the aspect ratio, but the image will be scaled to fit the given minimum width and height:
<style type="text/css">
img {
width: 400px;
height: 600px;
object-fit: contain;
}
</style>
3. object-fit: fill; [default value]
Adjust the size of the picture to fit the given width and height. Generally, in order to meet this requirement, the picture will be stretched or compressed;
<style type="text/css">
img {
width: 400px;
height: 600px;
object-fit: fill;
}
</style>
4. object-fit: none;
What does the picture look like, what does it look like:
<style type="text/css">
img {
width: 400px;
height: 600px;
object-fit: none;
}
</style>
4. object-fit: scale-down;
The image will be scaled to the smallest version of none and contain
<style type="text/css">
img {
width: 400px;
height: 600px;
object-fit: scale-down;
}
</style>
The summary is as follows:
| Original Image | cover | contain |
|---|---|---|
|
|
|
| Original Image | fill | none |
|---|---|---|
|
|
|
| Original Image | scale-down |
|---|---|
|
|