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.
No inner image, image is rendered by background image.
ESL Image has no own size. Can be used with img-container classes
<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-center (default)
Container: ratio: 2 x 1; gray border
Mode: cover (additional classes: horizontal alignment)
The following options available to control image horizontal position:
- .bg-h-center (default)
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
ESL Image uses inner img to render picture and is used as a wrapper that controls image source and state.
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