HTML | DOM Style objectFit Property
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:
html
<!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"> w3wiki </ h1 > < b > DOM Style objectFit Property </ b > < p > < img src= "https://media.w3wiki.net/wp-content/uploads/20190314004249/sample-image2.png" 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:
html
<!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"> w3wiki </ h1 > < b > DOM Style objectFit Property </ b > < p > < img src= "https://media.w3wiki.net/wp-content/uploads/20190314004249/sample-image2.png" 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:
html
<!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"> w3wiki </ h1 > < b > DOM Style objectFit Property </ b > < p > < img src= "https://media.w3wiki.net/wp-content/uploads/20190314004249/sample-image2.png" 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:
html
<!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"> w3wiki </ h1 > < b > DOM Style objectFit Property </ b > < p > < img src= "https://media.w3wiki.net/wp-content/uploads/20190314004249/sample-image2.png" 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:
html
<!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"> w3wiki </ h1 > < b > DOM Style objectFit Property </ b > < p > < img src= "https://media.w3wiki.net/wp-content/uploads/20190314004249/sample-image2.png" 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:
html
<!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"> w3wiki </ h1 > < b > DOM Style objectFit Property </ b > < p > < img src= "https://media.w3wiki.net/wp-content/uploads/20190314004249/sample-image2.png" 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:
html
<!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"> w3wiki </ h1 > < b > DOM Style objectFit Property </ b > < p id="parent"> < img src= "https://media.w3wiki.net/wp-content/uploads/20190314004249/sample-image2.png" 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
Contact Us