Zurich image - Web Component โ
The ZurichImage component can be used imported from:
Playground โ
Parameters โ
The Web component uses the <z-zurich-image>
tag:
By default, all the parameters are optional or can be set in different, except for the ones marked as required
The parametrization of the component can be done with the following custom HTML params:
Name | Type | Description | Slot | A11y |
---|---|---|---|---|
image | string | The name of the image we want to display | ||
image-alt | string | The alt text for the image | ||
width | number | The width of the image | ||
height | number | The height of the image | ||
frame | number[] | Attribute used to crop the image | ||
position | number[] | Attribute used to position the image | ||
background | string | The background color of the image | ||
quality | number | The quality of the image | ||
rotate | number | The rotation of the image |
Parameters use โ
image
โ
The attribute image
is a string that represents the name
to the image that will be displayed.
Make sure to use the correct name of the image you want to display. Check the Zurich media images
image-alt
โ
The attribute image-alt
is a string that represents the alt
text to the image that will be displayed.
width
& height
โ
The attributes width
and height
are numbers that represent the width and height of the image, respectively.
Using the width and height attributes, the image will maintain the aspect ratio. Filling the space available with a background color. Check the background attribute to change the color.
frame
โ
The attribute frame
is used to crop the image. The first value is the x
position and the second value is the y
position.
If the frame
attribute is set, the width
and height
attributes will be ignored.
position
โ
The attribute position
is used to define the position of the iframe
. The first value is the x
position and the second value is the y
position.
background
โ
The attribute background
is a string that represents the background color of the image. The default value is grey
.
quality
โ
The attribute quality
is a number that represents the image. If not specified the image will be displayed in the maximum 100%
quality. The values can be from 0
to 100
.
INFO
If the device rendering the image has a retina
display, the image will automatically be displayed in the best quality, increasing the DPI.
rotate
โ
The attribute rotate
is a number that represents the rotation of the image. The possible values are: 0
, 90
, 180
and 270
.
Browser support โ
Detected engine: ย
Chromium
Webkit
Gecko