A custom HTML component that simplifies the fit and alignment of an image in its container. This supports SVG images as well.
Include the script in <head>.
<script type="module" src="adaptive-image.js"></script>
Add Adaptive Image components like so:
<adaptive-image src="example.jpg" alt=""></adaptive-image>
The <adaptive-image> element supports the following attributes.
| Attribute | Description |
|---|---|
| src | Path to the image file. |
| alt | Alternate text for the image. |
| fit | The method used to scale the image to fit inside the component's content box. Accepted values are the same as for the CSS object-fit property: none, cover, fill, contain, or scale-down. Default is cover. |
| align | One or two space-separated values for how the image should be aligned inside the component's content box. top/center/bottom and left/middle/right. Default is center middle. |
Additionally, the following CSS properties may be used. These have priority over the element attributes.
| Property | Description |
|---|---|
| ‑‑fit | The method used to scale the image to fit inside the component's content box (none, cover, fill, contain, scale-down). Default is cover. |
| ‑‑align‑x | Horizontal alignment inside the component's content box (left/center/right). Default is center. |
| ‑‑align‑y | Vertical alignment inside the component's content box (top/middle/bottom). Default is middle. |
| ‑‑overflow | How to show any overflow of the image outside the component's content box. Default is hidden. |
Styles can be applied to the image itself using the ::part(img) pseudo-element.