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