CSS-свойство `object-view-box`

object-view-box — это свойство CSS, задающее прямоугольник в качестве видимой области (viewbox) внутри замещаемого элемента и позволяющее масштабировать или перемещать содержимое замещаемого элемента. Оно работает аналогично атрибуту viewBox SVG.

Попробуйте

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( [ <length-percentage> | auto ]{4} [ round <'border-radius'> ]? )

<xywh()> = 
  xywh( <length-percentage>{2} <length-percentage [0,∞]>{2} [ round <'border-radius'> ]? )

<length-percentage> = 
  <length> |
  <percentage>

Примеры

Основное использование

В этом примере показано основное использование и эффекты свойства 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 на 332px. Мы задаем height и width, устанавливая внешний размер 200px на 200px.

img {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Мы задаем три различных значения свойства object-view-box с помощью трех разных функций формы. Функция xywh() элемента intrinsic отображает квадратную часть содержимого изображения размером 200px, начиная с 70px от левого края и 90px от верхнего края. Функция rect() элемента zoom-in отображает квадратную часть исходного элемента размером 160px: от 110px до 270px от верхнего края и от 90px до 250px от левого края. Функция inset() замещаемого элемента zoom-out отображает квадратную часть исходного элемента размером 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);
}

@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;
  }
}

figure {
  display: inline-block;
  margin: 0;
}

figcaption {
  text-align: center;
}

Результаты

Версия 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. Точка смещения области просмотра, служащая фокусом эффекта увеличения, задается значением 500px для координаты x и значением 30px для координаты y; она соответствует верхнему левому углу правого глаза леопарда.

input {
  width: 350px;
}

output {
  text-align: center;
  background-color: #dedede;
  font-family: monospace;
  padding: 5px;
  display: block;
}

@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;
  }
}

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

Мы задаем размер изображения и сохраняем постоянными размеры области просмотра — компоненты w и h функции xywh(), — анимируя верхнее и левое положения и изменяя значения параметров 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);
  }
}

@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;
  }
}

Результат

Спецификации

Совместимость с браузерами

См. также

• Использование свойства CSS object-view-box
• object-fit
• object-position
• background-size
• Понимание соотношения сторон
• Изображения CSS module