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
ESL Query Rules
Change the image depending on the screen resolution