Skip to content

Use shared asset link in using_object-view-box content #41548

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 20, 2025
+1 −1
Merged

Use shared asset link in using_object-view-box content #41548

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file removed files/en-us/web/css/css_images/using_object-view-box/extrinsic-intrinsic_sizes.jpg
View file
Open in desktop
Binary file not shown.
2 changes: 1 addition & 1 deletion files/en-us/web/css/css_images/using_object-view-box/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ The intrinsic size is the actual size of the content itself; the size the elemen

CSS has many sizing properties. When it comes to sizing replaced elements, the [`object-fit`](/en-US/docs/Web/CSS/object-fit) property enables us to control, to some extent, how replaced elements are rendered within a defined box. For example, in the following screenshot, a 1200 x 400 image is displayed using an {{htmlelement("img")}} element. The `<img>` element is sized to 400 x 200. The image content is positioned using `object-fit: none;` declaration.

![An image demonstrating extrinsic and intrinsic image sizes; the center 400 by 200 section of a much larger 1200 by 400 image is visible in the 400 by 200 view box that is the size of the element displaying the image.](extrinsic-intrinsic_sizes.jpg)
![An image demonstrating extrinsic and intrinsic image sizes; the center 400 by 200 section of a much larger 1200 by 400 image is visible in the 400 by 200 view box that is the size of the element displaying the image.](https://mdn.github.io/shared-assets/images/diagrams/css/object-view-box/extrinsic-intrinsic_sizes.jpg)
The `object-view-box` property is more flexible than the `object-fit` property, and it is capable of doing more things. For example, it can be used to crop, zoom, and pan images. The property sets the viewable area (viewbox), which defines what part of the content to show and how to fit it inside the extrinsic size. The viewbox value contains a rectangle and its position relative to the intrinsic area of the content, but the _physical size of the view box remains equal to the extrinsic size_. The viewbox marks the area in the content to be displayed, and then the content area is transformed to match the extrinsic dimensions fitting into the HTML element.

In the following image, we have the same leopard picture in a 400 x 150 image element. However, this time we have used `object-view-box` property to crop the portion of the picture showing the leopard's eyes.
Expand Down