Skip to content

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:

NameTypeDescriptionSlotA11y
imagestringThe name of the image we want to display
image-altstringThe alt text for the image
widthnumberThe width of the image
heightnumberThe height of the image
framenumber[]Attribute used to crop the image
positionnumber[]Attribute used to position the image
backgroundstringThe background color of the image
qualitynumberThe quality of the image
rotatenumberThe 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

HTML Examples

CodeSandbox example