HTML - DOM Style 对象 objectFit 属性

HTML DOM Style 对象 **objectFit** 属性设置或返回图像或视频如何调整大小以适应其容器。

语法

设置 objectFit 属性

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

获取 objectFit 属性

object.style.objectFit;

属性值

值	描述
fill	这是默认值，其中替换内容的大小调整为填充元素的内容框。
contain	它将替换内容缩放以保持纵横比，同时适应内容框。
cover	它将替换内容的大小调整为保持其纵横比，同时填充元素的整个内容框。如果需要，对象会被裁剪以适应内容框。
scale-down	它将替换图像的大小调整为像指定 none 或 contain 一样。这将导致较小的对象大小。
none	它指定不调整替换内容的大小。
initial	它用于将此属性设置为其默认值。
inherit	它用于继承其父元素的属性。

返回值

它返回一个字符串值，表示元素的 object-fit。

HTML DOM Style 对象“objectFit”属性示例

以下示例说明了用于调整图像大小的 object-fit 属性。

<!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>

支持的浏览器

属性
objectFit	是 32	是 79	是 36	是 10	是 19

html_dom_style_object_reference.htm

打印页面