diff --git a/files/en-us/web/css/css_images/using_object-view-box/extrinsic-intrinsic_sizes.jpg b/files/en-us/web/css/css_images/using_object-view-box/extrinsic-intrinsic_sizes.jpg deleted file mode 100644 index bd8ea6dea2e5120..000000000000000 Binary files a/files/en-us/web/css/css_images/using_object-view-box/extrinsic-intrinsic_sizes.jpg and /dev/null differ diff --git a/files/en-us/web/css/css_images/using_object-view-box/index.md b/files/en-us/web/css/css_images/using_object-view-box/index.md index af522a5e6157471..dfedcd1b41a8977 100644 --- a/files/en-us/web/css/css_images/using_object-view-box/index.md +++ b/files/en-us/web/css/css_images/using_object-view-box/index.md @@ -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 `` 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.