object-view-box
object-view-box 这个 CSS 属性在可替换元素中定义一个矩形作为可视区域（视区），从而可以缩放或平移可替换元素的内容。它的工作方式类似于 SVG 的 viewBox 属性。
试一试
object-view-box: inset(0 0);
object-view-box: inset(20%);
object-view-box: xywh(95px 20px 60px 60px);
object-view-box: rect(110px 120px 200px 45px);
object-view-box: none;
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/plumeria-146x200.jpg"
alt="A close-up of red flowers and buds on a branch." />
</section>
#example-element {
height: 100%;
width: 100%;
border: 2px dotted #888888;
}
@supports not (object-view-box: none) {
body::before {
content: "Your browser does not support the 'object-view-box' property.";
color: black;
background-color: #ffcd33;
display: block;
width: 100%;
text-align: center;
}
}
语法
/* keywords */
object-view-box: none;
/* <basic-shape-rect> functions */
object-view-box: inset(20%);
object-view-box: inset(20% 30%);
object-view-box: inset(10px 0 25px 33px);
object-view-box: xywh(95px 20px 60px 60px);
object-view-box: rect(10px 30px 30px 10px);
/* Global values */
object-view-box: inherit;
object-view-box: initial;
object-view-box: revert;
object-view-box: revert-layer;
object-view-box: unset;
值
none-
元素没有视区。这是默认值。
<basic-shape-rect>-
一个
inset()、xywh()或rect()函数，为具有自然尺寸（可替换元素）的元素指定一个视区。否则，解析为none。
描述
object-view-box 属性可用于裁剪或调整可替换元素的大小，包括图像和视频。它的工作原理是在为该元素保留的可用空间中显示可替换元素内容的一部分。显示的可替换元素的部分由该属性的值定义。可用的保留空间由元素的默认外部尺寸决定。显示的内容子区域可以放大、缩小或以其原始尺寸呈现，同时保持内容的固有宽高比。
该属性值为 <basic-shape-rect>，是 <basic-shape> 函数中仅限于定义矩形形状的一种。例如，该值可以是 xywh() 函数
img {
object-view-box: xywh(410px 0 400px 150px);
}
在这种情况下，将要显示的图像部分的左上角距离左边缘 410px，距离顶部 0，这由 x 和 y 坐标参数定义。将要显示的原始图像部分的大小为 400px 宽、150px 高；即函数的 w 和 h 分量。这个 400x150 的图像部分将显示在页面布局时为图像本身保留的空间中。显示的内容部分是其原始固有尺寸、放大还是缩小，分别取决于视区是 400px x 150px、小于还是大于图像元素的尺寸。
在这种情况下，由于 object-view-box 属性定义的矩形视区和 <img> 元素的矩形区域大小相同，即 400 x 150 像素，因此可替换元素没有被缩放。
减小 w 和 h 的值可以产生放大效果；因为较小的图像部分被拉伸，所以有放大效果。
增加 w 和 h 参数的值可以产生缩小效果；因为较大的图像部分被收缩，所以有缩小效果。
对 x 和 y 坐标进行动画处理，通过移动元素的视区而元素本身保持在原位，从而产生平移效果。
正式定义
正式语法
object-view-box =
none |
<basic-shape-rect>
<basic-shape-rect> =
<inset()> |
<rect()> |
<xywh()>
<inset()> =
inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )
<rect()> =
rect( <top> , <right> , <bottom> , <left> )
<xywh()> =
xywh( <length-percentage>{2} <length-percentage [0,∞]>{2} [ round <'border-radius'> ]? )
<length-percentage> =
<length> |
<percentage>
<border-radius> =
<length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?
示例
基本用法
本示例演示了 object-view-box 属性的基本用法和效果，并使用了三个不同的 <basic-shape-rect> 函数作为示例。
HTML
我们有三个几乎相同的 <img> 元素，包裹在 <figure> 元素中；唯一的区别是它们的类名。
<figure>
<img
class="intrinsic"
src="https://mdn.github.io/shared-assets/images/examples/painted-hand.jpg"
alt="Original scale section of a painted hand" />
<figcaption>intrinsic</figcaption>
</figure>
<figure>
<img
class="zoom-in"
src="https://mdn.github.io/shared-assets/images/examples/painted-hand.jpg"
alt="Zoomed in section of a painted hand" />
<figcaption>zoomed in</figcaption>
</figure>
<figure>
<img
class="zoom-out"
src="https://mdn.github.io/shared-assets/images/examples/painted-hand.jpg"
alt="Zoomed out section of a painted hand" />
<figcaption>zoomed out</figcaption>
</figure>
CSS
我们为所有图像设置了相同的宽度和高度，然后为每个类（即每个图像）设置了不同的 object-view-box 值。彩绘手图像的固有尺寸为 298px x 332px。我们设置了 height 和 width，将外部尺寸设置为 200px x 200px。
img {
width: 200px;
height: 200px;
border: 1px solid red;
}
我们使用三个不同的形状函数设置了三个不同的 object-view-box 属性值。intrinsic 元素的 xywh() 函数值显示了一个 200px 的正方形图像内容区域，从左侧 70px 和顶部 90px 处开始。zoom-in 元素的 rect() 函数显示了原始元素的一个 160px 的正方形区域，从上边缘的 110px 到 270px，以及从左边缘的 90px 到 250px。zoom-out 可替换元素的 inset() 函数显示了原始元素的一个 298px 的正方形区域；显示了图像的整个宽度，同时从顶部和底部各裁剪了 17px。
.intrinsic {
object-view-box: xywh(70px 90px 200px 200px);
}
.zoom-in {
object-view-box: rect(110px 250px 270px 90px);
}
.zoom-out {
object-view-box: inset(17px 0 17px 0);
}
结果
intrinsic 版本显示的是未缩放的图像部分。zoom-in 版本显示的是图像的一个较小部分（160px 正方形），被放大以适应 200px 正方形的视区。由于该部分被拉伸，看起来是放大的。zoom-out 版本显示的是图像的一个较大部分（298px 正方形），被缩小以适应 200px 正方形的视区。由于该部分被收缩，看起来是缩小的。
使用 object-view-box 属性实时放大
此示例演示了如何使用 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> 元素的尺寸也不变。
使用 object-view-box 属性进行平移
此示例演示了通过对 object-view-box 属性值进行动画处理来平移图像。
HTML
HTML 中包含一张图片。
<img
src="https://mdn.github.io/shared-assets/images/examples/leopard.jpg"
alt="leopard" />
CSS
我们定义一个图像尺寸，并保持视区尺寸（即 xywh() 函数的 w 和 h 分量）不变，同时对顶部和左侧位置进行动画处理，在五秒内改变 x 和 y 参数的位置。
img {
width: 350px;
height: 350px;
object-view-box: xywh(0 30px 400px 400px);
animation: panning 5s linear infinite alternate;
}
@keyframes panning {
from {
object-view-box: xywh(0 -50px 400px 400px);
}
to {
object-view-box: xywh(800px 68px 400px 400px);
}
}
结果
规范
| 规范 |
|---|
| CSS 图像模块 Level 5 # propdef-object-view-box |
浏览器兼容性
加载中…