@exadel/esl/modules/esl-image/core/esl-image.less

Exadel Smart Library (ESL) is the lightweight custom elements library that provide a set of super-flexible components

// ESL Image core definition mixin
.esl-image-init(@tagName: esl-image) {
  @{tagName} {
    display: block;
    width: 100%;
    padding: 0;
    text-align: center;

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;

    &[lazy]:not([ready]) {
      min-height: 1px;
    }

    &[mode='origin'] {
      display: inline-block;
      width: auto;
      height: auto;
    }
    &[mode='cover'] {
      height: 100%;
    }
    &[mode='save-ratio'] {
      height: 0;
    }
    &[mode='inner-svg'] svg {
      max-width: 100%;
      max-height: 100%;
    }

    .inner-image {
      max-width: 100%;
    }

    &::after {
      display: none;
      content: attr(alt);
    }
    &[error]::after {
      display: inline-block;
    }
    &[loaded]::after {
      display: none;
    }

    &[mode='fit'][error]::after,
    &[mode='origin'][error]::after {
      display: none;
    }

    // Flex mode make image cover available box without saving ration
    &.bg-flex {
      background-size: 100% 100%;
    }
    // Inscribe mode inscribe image inside container
    &.bg-inscribe {
      background-size: contain;
    }

    // Vertical background position
    &.bg-v-top {
      background-position-y: top;
    }
    &.bg-v-center {
      background-position-y: center;
    }
    &.bg-v-bottom {
      background-position-y: bottom;
    }

    // Horizontal background position
    &.bg-h-left {
      background-position-x: left;
    }
    &.bg-h-center {
      background-position-x: center;
    }
    &.bg-h-right {
      background-position-x: right;
    }
  }
}