Image - Web Component

...

Browser support

Parameters

The Web component uses a <z-image> tag.

The parametrization of the component can be done with the following custom HTML params:

Name	Type	Description
image-src	string	Defines the image source URL.
config (optional)	string	Defines the aspect ratio for the image. Possible values are: full-width, 3:2, 1:1, 4:3, 16:9. Also you can insert the value 1:1:round to get a rounded image only for 1:1 aspect ratio.
size (optional)	number	Defines the image column size. Possible values are: 2, 3, 4, 5, 6.
copyright (optional)	string	Defines the copyright text of the image
caption (optional)	string	Defines the caption text of the image

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.3.7/@zurich/web-components/styles.css" />
<script type="module" src="/0.3.7/@zurich/web-components/image.js"></script>

Code

<z-image image-src="../sample.png" config="1:1:round" size="2"></z-image>
<z-image image-src="../sample.png" config="1:1" size="2"></z-image>
<z-image image-src="../sample.png" config="1:1" size="3"></z-image>
<z-image image-src="../sample.png" config="1:1" size="4" copyright="copyright"
  style="--z-image--copywrite-color	:#fff"></z-image>