使用 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 值如何创建平移效果。