Theobject-view-boxCSS property defines a rectangle as a viewable area (viewbox) within areplaced element, enabling the content of the replaced element to be zoomed or panned. It works similarly to the SVGviewBox attribute.

Try it

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

Syntax

/* 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;

Values

none

The element does not have a view box. This is the default.

<basic-shape-rect>

Aninset(),xywh(), orrect() function specifying a view box for an element with natural dimensions (replaced elements). Resolves tonone otherwise.

Description

Theobject-view-box property can be used to crop or resizereplaced elements, including images and videos. It works by showing a section of the content of the replaced element in the available space reserved for that element. The section of the replaced element that is displayed is defined by the value of the property. The available reserved space is determined by the element's defaultextrinsic size. The subsection of the content displayed can be presented zoomed-in, panned-out, or at its original size, while maintaining the content's intrinsicaspect ratio.

The property value is a<basic-shape-rect>, one of the<basic-shape> functions limited to defining a rectangular shape. For example, the value can be axywh() function:

img {  object-view-box: xywh(410px 0 400px 150px);}

In this case, the top left corner of the section of the image that will be displayed is410px from the left edge and0 from the top, as defined by x and y coordinate parameters. The size of the section of the original image that will be displayed is400px wide by150px tall; thew andh components of the function. This 400x150 section of the image will be displayed in the space that was reserved for the image itself when the page was laid out. Whether the content section displayed is its original intrinsic size, zoomed in, or zoomed out depends on whether the viewbox is 400px x 150px, smaller, or larger than the image element's size, respectively.

In this case, as the rectangular viewbox defined by theobject-view-box property and the rectangular area of the<img> element are the same size, i.e., 400 x 150 pixels, the replaced element is not scaled.

Decrease thew andh values to create a zoomed-in effect; as the smaller image section is stretched, it has a zoomed-in effect.

Increase thew andh argument values to create a zoomed-out effect; as the larger image section is shrunk, it has a zoomed-out effect.

Animating thex andy coordinates creates a panning effect by moving the element's viewbox while the element itself remains in its original location.

Formal definition

Formal syntax

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}]?

Examples

Basic usage

This example demonstrates the basic usage and the effects of theobject-view-box property, with examples using the three different<basic-shape-rect> functions.

HTML

We have three almost identical<img> elements wrapped in<figure> elements; the only difference is their class names.

<figure>  <img       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       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       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

We style all the images to have the same width and height, then set each class, and therefore each image, to have a differentobject-view-box value. The intrinsic size of the painted hand image is298px by332px. We set theheight andwidth, setting the extrinsic size to200px by200px.

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

We set three differentobject-view-box property values using three different shape functions. Theintrinsic element'sxywh() function value displays a200px square section of the image content, starting from the70px from the left and90px from the top. Thezoom-in element'srect() function displays a160px square section of the original element, going from110px to270px from the top edge and90px to250px from the left edge. Thezoom-out replaced element'sinset() function displays a298px square section of the original element; showing the entire width of the image while cutting of a 17px from the top and bottom.

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

Results

Theintrinsic version is showing an unscaled section of the image. Thezoom-in version is showing a smaller section (160px square) of the image, scaled up to fit200px square viewbox. As the section is stretched, it looks zoomed in. Thezoom-out version is showing a larger (298px square) section of the image, scaled down to fit200px square viewbox. As the section is shrunk, it looks zoomed out.

Live zoom-in using object-view-box property

This example demonstrates using theobject-view-box property to zoom a section of a replaced element in and out, within a statically sized HTML element. In this case, the eye of the leopard, within a very large image, serves as the focal point of the zoom effect.

HTML

We include an<img> element and arange<input> element, with an associated<label>. The natural dimensions, or intrinsic size, of the original leopard image are1244px wide by416px tall, with anaspect ratio of3: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" min="115" max="380" value="150" /></p><output></output>

CSS

We define a--box-size custom property, which is used as the height and width in thexywh() function, creating a square viewbox with an aspect ratio of1:1. The view box's offset point, the focal point in our zoom effect, is set at500px for thex coordinate and30px for they coordinate, which corresponds to the top-left corner of the leopard's right eye.

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

We add an event listener to the slider that updates the value of the--boxSize custom property when the user interacts with it. To increase the zoom-in effect when the slider is moved to the right, the slider's value is inverted by subtracting it from500px, as reducing the view box size increases the zoom-in effect.

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();

Result

Move the slider to the right to increase the zoom-in effect and left to reduce it. The slider only affects the dimensions of the view box, while the x and y values, the origin point of the viewbox, remain constant. The size of the<img> element doesn't change either.

Panning using the object-view-box property

This example demonstrates panning an image by animating theobject-view-box property value.

HTML

The HTML includes a single image.

<img  src="https://mdn.github.io/shared-assets/images/examples/leopard.jpg"  alt="leopard" />

CSS

We define an image size and keep the viewbox dimensions, thew andh components of thexywh() function, constant, as we animate the top and left positions, changing the position of thex andy parameters over five seconds.

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

Result

Specifications

Browser compatibility

See also

• Using the CSSobject-view-box property
• object-fit
• object-position
• background-size
• Understanding aspect ratio
• CSS images module