使用 CSS object-view-box 屬性
object-view-box 屬性可用於在替換元素中定義視框，從而僅顯示替換內容的一部分。替換元素中顯示的部分可以放大、縮小或以原始尺寸呈現，同時保持內容的固有縱橫比。在本指南中，我們將研究此屬性，將其與相似的object-fit屬性進行比較，並透過放大和縮小以及平移元素來探索其功能。
固有尺寸、外在尺寸和 object-fit
外在尺寸是 HTML 元素的尺寸，其中內容根據盒模型和視覺格式化模型進行渲染。盒模型和視覺格式化模型根據內容、HTML 屬性、應用於元素及其祖先的 CSS 以及視口尺寸來確定渲染元素的尺寸。
固有尺寸是內容本身的實際尺寸；即在沒有應用任何樣式且沒有佈局約束時元素的尺寸。雖然固有尺寸和外在尺寸不必相同，但通常重要的是要保持替換元素的固有縱橫比。
object-view-box 與 object-fit
CSS 有許多尺寸屬性。在替換元素的尺寸方面，object-fit 屬性使我們能夠在一定程度上控制替換元素如何在定義的框中渲染。例如，在以下螢幕截圖中，使用<img>元素顯示 1200 x 400 影像。<img>元素尺寸為 400 x 200。影像內容使用object-fit: none;宣告定位。
object-view-box 屬性比 object-fit 屬性更靈活，並且能夠做更多事情。例如，它可以用於裁剪、縮放和平移影像。該屬性設定了可見區域（視框），它定義了要顯示內容哪個部分以及如何將其放入外在尺寸中。視框值包含一個矩形及其相對於內容固有區域的位置，但視框的物理尺寸始終等於外在尺寸。視框標記要顯示的內容區域，然後將內容區域轉換為與適合 HTML 元素的外在尺寸匹配。
在下圖中，我們在 400 x 150 影像元素中顯示了相同的豹子圖片。但是，這次我們使用了 object-view-box 屬性來裁剪圖片中顯示豹子眼睛的部分。
在這種情況下，由於 <img> 元素的尺寸和由 object-view-box 屬性定義的視框尺寸相同，即 400 x 150 畫素，因此兩者的縱橫比相同，替換元素既未縮放也未扭曲。
保持相同的縱橫比可防止影像失真。使用 object-view-box，我們可以在具有不同外在尺寸和視框尺寸的情況下完成各種影像操作，而不會在放大和縮小時扭曲替換元素。
放大和縮小
減小視框尺寸（即顯示替換元素的區域）會增加放大效果，因為較小的內容會拉伸以適應 HTML 元素的尺寸。減小它會產生縮小效果。
此示例演示瞭如何使用 object-view-box 屬性在靜態大小的 HTML 元素中放大和縮小替換元素的一部分。在這種情況下，豹子的眼睛（在一張非常大的圖片中）是縮放效果的焦點。
HTML
我們包含了一個<img>元素和一個range <input>元素，並帶有一個相關的<label>。原始豹子影像的自然尺寸或固有尺寸為 1244px 寬、416px 高，縱橫比為 3:1。
<img
src="https://mdn.github.io/shared-assets/images/examples/leopard.jpg"
alt="leopard" />
<p>
<label for="box-size">Zoom-in: </label>
<input type="range" id="box-size" min="115" max="380" value="150" />
</p>
<output></output>
CSS
我們定義了一個自定義屬性 --box-size，它在xywh()函式中用作高度和寬度，建立一個縱橫比為 1:1 的方形視框。視框的偏移點，即我們縮放效果的焦點，x 座標設定為 500px，y 座標設定為 30px，這對應於豹子右眼的左上角。
img {
width: 350px;
height: 350px;
border: 2px solid red;
--box-size: 150px;
object-view-box: xywh(500px 30px var(--box-size) var(--box-size));
}
JavaScript
我們為滑塊添加了一個事件監聽器，當用戶與其互動時，它會更新 --boxSize 自定義屬性的值。為了在滑塊向右移動時增加放大效果，滑塊的值透過從 500px 中減去它來反轉，因為減小視框尺寸會增加放大效果。
const img = document.querySelector("img");
const zoom = document.getElementById("box-size");
const output = document.querySelector("output");
function update() {
const size = 500 - zoom.value;
img.style.setProperty("--box-size", `${size}px`);
output.innerText = `object-view-box: xywh(500px 30px ${size}px ${size}px);`;
}
zoom.addEventListener("input", update);
update();
結果
向右移動滑塊以增加放大效果，向左移動以減小放大效果。滑塊僅影響視框的尺寸，而 x 和 y 值（視框的原點）保持不變。<img>元素的尺寸也保持不變。
平移影像
我們可以透過改變視框視窗的座標，即 xywh() 函式的 x 和 y 分量，同時保持可見部分的尺寸不變來建立平移效果。例如，透過保持視框尺寸不變並僅改變水平位置——x 引數——我們可以建立水平平移效果。
移動滑塊。請注意，增加和減小 xywh() 函式的 x 值如何建立平移效果。