object-fit
CSS object-fit Property
The object-fit property is used to specify how an element should be resized to fit its content box.
The object-fit property allows to fit the contents of an image into the dimensions specified in the style sheet.
The content can be set to scale up or down, shrink or stretch to fit into the specified width and height with the help of the property values. There are five values:
fill
contain
cover
none
scale-down
| 类目 | 类目 |
|---|---|
| Initial Value | fill |
| Applies to | Replaced elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.objectFit = “cover”; |
Syntax
Syntax
object-fit: fill | contain | cover | scale-down | none | initial | inherit;
Example of the object-fit property with the “fill” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: fill;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
<h3>Fill value:</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
</body>
</html>
Result
Here, the image with the applied value is stretched to fit the box. In the next example, the “cover” value cuts off the sides of an image, preserves the aspect ratio, and also fills in space.
Example of the object-fit property with the “cover” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: cover;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
<h3>Cover value:</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
</body>
</html>
In the following example, the image with the applied value has the aspect ratio of the original image.
Example of the object-fit property with the “contain” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: contain;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
<h3>Contain value:</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
</body>
</html>
In our last example, the applied value sets the image in a smaller size as if “contain” or “none” were specified.
Example of the object-fit property with the “scale-down” value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: scale-down;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
<h3>Scale-down value:</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200">
</body>
</html>
Values
Values
| Value | Description |
|---|---|
| fill | The content is resized as much to fill the content box. This is the default value of this property. |
| contain | The aspect ratio of content is scaled up as much as possible while remaining contained within the boundaries of the element. |
| cover | The aspect ratio of the content is sized while filling the element’s content box. It will be clipped to fit the content box. |
| none | No resized content. |
| scale-down | The same as none or contain values. The content of the element will be in a smaller size. |
| initial | Makes the property use its default value. |
| inherit | Inherits the property from its parents element. |