Image - CSS Component
Browser support
Detected engine:
Chromium
Webkit
Gecko
Construction
The Web component uses a <img>
tag. Using the z-image
HTML custom attribute will render the image CSS component .
z-image
The z-image
attribute is the main attribute used to render the image component. Make sure you specify the right ratio
of the image otherwise the image will be rendered with the default 1:1
ratio.
Other possible aspect ratios, apart from 1:1
are: full-width
, 3:2
, 4:3
, 16:9
.
The z-image
attribute has one additional modifier that can be applied in order after the ratio
of the image, using the colon (:
) as a separator. The pattern would be <ratio><?:round>
.
The round
modifier can only be used with the 1:1
aspect ratio. This modifier will render the image with a rounded border. If you use it with another aspect ratio, the image will be rendered with the default aspect ratio.
It can also be used omitting the ratio and just using round
image-size
The attribute image-size
is used to define the image column size. Possible values are: 2
, 3
, 4
, 5
, 6
. Check the size section.
caption
and copyright
If you want to insert a caption for the image, make sure to wrap the image with a <figure>
tag and the caption with a <figcaption>
tag.
Also for a copyright text use the image-copyright
attribute inside the <figure>
tag.
The color of the copyright text can be customized using the --z-image--copywrite-color
CSS custom property.
Fallback
If the image cannot fetch the image source, and the javascript import is being used, then the image will automatically display a fallback image.
If you need to force the behavior because of the render, use the onerror
attribute with the following value:
Playground
Customization
HTML Examples
Imports
html
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/Image.css" />
Code
html
<img src="../sample.webp" z-image="1:1:round" image-size="2" loading="lazy" alt="Test text" />
<img src="../sample.webp" z-image="1:1" image-size="2" loading="lazy" alt="Test text" />
<img src="../sample.webp" z-image="1:1" image-size="3" loading="lazy" alt="Test text" />
<figure image-copyright="Copyright" style="--z-image--copywrite-color :#fff">
<img src="../sample.webp" z-image="1:1" image-size="4" loading="lazy" alt="Test text" />
</figure>