Image

Mode: save-ratio

ESL Image uses the entire available width and occupies the height according to the image aspect ratio.

No inner image, css background is used to render the image.

Mode: cover

No inner image, image is rendered by background image.

ESL Image has no own size. Can be used with img-container classes

Example:

<div class="img-container img-container-4-3">
  <esl-image ...></esl-image>
</div>

Mode: cover (additional classes: vertical alignment)

As background-image is used to render image in cover mode we can control image cropping options through the css.

The following options are available to control image vertical position:

• .bg-v-top
• .bg-v-center (default)
• .bg-v-bottom

Container: ratio: 2 x 1; gray border

Mode: cover (additional classes: horizontal alignment)

The following options available to control image horizontal position:

• .bg-h-left
• .bg-h-center (default)
• .bg-h-right

Container: ratio: 2 x 3; gray border

Mode: cover (additional classes: inscribe)

bg-inscribe can be used to declare inscribe image behaviour

Container: size: 300 x 150px; gray border

Mode: fit

ESL Image uses inner img to render picture and is used as a wrapper that controls image source and state.

Mode: origin

Origin mode behaves similarly to the fit mode but sets esl-image size according to inner image original size.

SVG Inline loading

Mode: inner-svg, lazy mode

ESL Image inner-svg mode that loads svg content inline.

NOTE: requesting svg endpoint should accept CORS policy restrictions