This example demonstrates the following aspects of the web component:
<img>
element) to a
ratio close to one of the depicted image regions (green and red
rectangles), the component will automatically zoom in on it. If you have
a mouse, you can resize the element by dragging its bottom-right corner.
Otherwise you can click the Resize me
button.
object-*
, transform*
, and
clip-path
.
object-fit: cover
) when setting the data-disabled="all"
attribute. Test it
by clicking the Enable web component
checkbox.
data-image-regions=
attribute, either as relative or pixel
coordinates.
data-loglevel=
attribute. Log
entries are prefixed with the element's id
.
![]() |
|
▲ |