esl Exadel Smart Library
  • Core
  • Components
  • Examples
Get started
Exadel Smart Library
  • Search
  • Introduction
    • Installation Guide
    • Browser Support
    • Our Roadmap
  • Core
    • ESL Base Element
    • new ESL Mixin Element
    • ESL Media Query
    • ESL Traversing Query
    • new ESL Event Listeners
    • ESL Utils
  • Components
    • beta ESL A11y Group
    • ESL Alert
    • beta ESL Animate
    • beta ESL Footnotes
    • ESL Image
    • ESL Media
    • ESL Panel
    • ESL Panel Group
    • beta ESL Popup
    • ESL Scrollbar
    • beta ESL Select
    • beta ESL Select List
    • ESL Tabs
    • ESL Toggleable
    • ESL Trigger
  • Examples
    • Accordion
    • beta Animate
    • Embedded Audio
    • Embedded Video
    • beta Footnotes
    • Image
    • Menu
    • Notification
    • beta Popup
    • Scrollbar
    • beta Select Dropdown
    • beta Select List
    • Tabs
    • Toggleable

Image

Related Components

  • ESL 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


ESL v4.2.0 © 2023 Exadel, Inc
Core Team Contributors: Alexey Stsefanovich, Julia Murashko, Yuliya Adamskaya, Dmytro Shovchko, Anna Barmina, Anastasiya Lesun
Design by Iryna Pavlenko