HTML - DOM Style Object objectFit Property

Quiz

HTML DOM Style Object objectFit property sets or returns how an image or video to be resized to fit it's container.

Syntax

Set the objectFit property:

object.style.objectFit= "fill | contain | cover | scale-down | none | initial | inherit";

Get the objectFit property:

object.style.objectFit;

Property Values

Value	Description
fill	This is the default value in which replaced content is resized to fill the element's content box.
contain	It sets replaced content to be scaled to maintain the aspect ratio while fitting content box.
cover	It sets replaced content to be sized to maintain it's aspect ratio while filling element's entire content box. The object is clipped to fit content box if required.
scale-down	It sets replaced image to be resized like none or contain were specified. It results in smaller object size.
none	It specifies that replaced content is not resized.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents object fit of an element.

Example of HTML DOM Style Object 'objectFit' Property

The following example illustrates object fit properties to resize the image.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object objectFit Property
    </title>
    <style>
        #image {
           height: 500px;
           width: 500px;
        }
    </style>
</head>
<body>
    <h3>
        Click to set objectFit property.
    </h3>
    <button onclick="fun()">Contain</button>
    <button onclick="funThree()">Cover</button>
    <button onclick="funFour()">Scale Down</button>
    <br>
    <img src="/html/images/test.png" id="image">
    <script>
        function fun() {
            let x = document.getElementById("image")
                .style.objectFit = "contain";
        }
        function funThree() {
            let x = document.getElementById("image")
                .style.objectFit = "cover";
        }
        function funFour() {
            let x = document.getElementById("image")
                .style.objectFit = "scale-down";
        }
    </script>
</body>
</html>

Supported Browsers

Property
objectFit	Yes 32	Yes 79	Yes 36	Yes 10	Yes 19

html_dom.htm

Print Page