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.

Image

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

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.

ImageImageImage

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.

Image
Image caption

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.

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.3/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.3/@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>