The Style objectFit property in HTML DOM is used to set or return how an image or video element is resized to fit it’s container.
Syntax:
- It returns the objectFit property.
object.style.objectFit
- It is used to set the objectFit property.
object.style.objectFit = "contain|cover|scale-down|none|fill| initial|inherit"
Return Values: It returns a string value, which represents the object-fit of an element
Property Values:
1. contain: The replaced content is scaled to maintain its aspect ratio while also fitting the content box.
Example 1:
<!DOCTYPE html><html>
<head>
<title>
DOM Style objectFit Property
</title>
<style>
#content {
border: solid;
height: 250px;
width: 400px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
DOM Style objectFit Property
</b>
<p>
<img src=
id="content" />
</p>
<button onclick="setObjectFit()">
Change objectFit
</button>
<!-- Script to set objectFit to contain -->
<script>
function setObjectFit() {
elem = document.querySelector('#content');
elem.style.objectFit = 'contain';
}
</script>
</body>
</html>
|
Output:
- Before clicking the button:
- After clicking the button:
2. cover: The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box. The object may be clipped to fit the content box if required.
Example 2:
<!DOCTYPE html><html>
<head>
<title>
DOM Style objectFit Property
</title>
<style>
#content {
border: solid;
height: 250px;
width: 400px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
DOM Style objectFit Property
</b>
<p>
<img src=
id="content" />
</p>
<button onclick="setObjectFit()">
Change objectFit
</button>
<!-- Script to set objectFit to cover -->
<script>
function setObjectFit() {
elem = document.querySelector('#content');
elem.style.objectFit = 'cover';
}
</script>
</body>
</html>
|
Output:
- Before clicking the button:
- After clicking the button:
3. scale-down: The replaced image is resized as if none or contain were specified and it results to the smallest object size.
Example 3:
<!DOCTYPE html><html>
<head>
<title>
DOM Style objectFit Property
</title>
<style>
#content {
border: solid;
height: 250px;
width: 400px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
DOM Style objectFit Property
</b>
<p>
<img src=
id="content" />
</p>
<button onclick="setObjectFit()">
Change objectFit
</button>
<!-- Script to set objectFit to scale-down -->
<script>
function setObjectFit() {
elem = document.querySelector('#content');
elem.style.objectFit = 'scale-down';
}
</script>
</body>
</html>
|
Output:
- Before clicking the button:
- After clicking the button:
4. none: The replaced content is not resized.
Example 4:
<!DOCTYPE html><html>
<head>
<title>
DOM Style objectFit Property
</title>
<style>
#content {
border: solid;
height: 250px;
width: 400px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
DOM Style objectFit Property
</b>
<p>
<img src=
id="content" />
</p>
<button onclick="setObjectFit()">
Change objectFit
</button>
<!-- Script to set objectFit to none -->
<script>
function setObjectFit() {
elem = document.querySelector('#content');
elem.style.objectFit = 'none';
}
</script>
</body>
</html>
|
Output:
- Before clicking the button:
- After clicking the button:
5. fill: The content is resized to fill the element’s content box. This is the default value.
Example 5:
<!DOCTYPE html><html>
<head>
<title>
DOM Style objectFit Property
</title>
<style>
#content {
border: solid;
height: 250px;
width: 400px;
object-fit: scale-down;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
DOM Style objectFit Property
</b>
<p>
<img src=
id="content" />
</p>
<button onclick="setObjectFit()">
Change objectFit
</button>
<!-- Script to set objectFit to fill -->
<script>
function setObjectFit() {
elem = document.querySelector('#content');
elem.style.objectFit = 'fill';
}
</script>
</body>
</html>
|
Output:
- Before clicking the button:
- After clicking the button:
6. initial: This is used to set this property to its default value.
Example 6:
<!DOCTYPE html><html>
<head>
<title>
DOM Style objectFit Property
</title>
<style>
#content {
border: solid;
height: 250px;
width: 400px;
object-fit: scale-down;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
DOM Style objectFit Property
</b>
<p>
<img src=
id="content" />
</p>
<button onclick="setObjectFit()">
Change objectFit
</button>
<!-- Script to set objectFit to initial -->
<script>
function setObjectFit() {
elem = document.querySelector('#content');
elem.style.objectFit = 'initial';
}
</script>
</body>
</html>
|
Output:
- Before clicking the button:
- After clicking the button:
7. inherit: This inherits the property from its parent.
Example 7:
<!DOCTYPE html><html>
<head>
<title>
DOM Style objectFit Property
</title>
<style>
#parent {
object-fit: contain;
}
#content {
border: solid;
height: 250px;
width: 400px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
DOM Style objectFit Property
</b>
<p id="parent">
<img src=
id="content" />
</p>
<button onclick="setObjectFit()">
Change objectFit
</button>
<!-- Script to set objectFit to inherit -->
<script>
function setObjectFit() {
elem = document.querySelector('#content');
elem.style.objectFit = 'inherit';
}
</script>
</body>
</html>
|
Output:
- Before clicking the button:
- After clicking the button:
Supported Browsers: The browser supported by objectFit property are listed below:
- Google Chrome 32.0
- Edge 79.0
- Firefox 36.0
- Opera 19.0
- Apple Safari 10.0