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

列印頁面