Image - CSS Component ​

The Image component can be used imported from:

Playground ​

Construction ​

The Web component uses a <picture> 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.

ImageImage

If you want to insert a copyright text use the image-copyright attribute inside the <figure> tag.

Image

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:

alt

Special uses ​

Caption ​

We can use the Image together with the Figure

Image
Caption

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples ​

CodeSandbox example ​