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

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

// Image Container declaration mixin
.esl-image-container-init(@tagName: esl-image, @containerClass: img-container) {
  .@{containerClass} {
    position: relative;
    overflow: hidden;

    &:not(.@{containerClass}-auto) @{tagName} {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;

      &[mode='origin'],
      &[mode='save-ratio'] {
        position: relative;
      }

      &[mode='fit'] {
        position: static;
        overflow: hidden;
      }
      &[mode='fit'] > .inner-image {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        transform: translate(-50%, -50%);

        @supports (object-fit: cover) {
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          transform: none;
          object-fit: cover;
        }
      }
    }

    @{tagName}[lazy] {
      opacity: 0;
      &[ready] {
        opacity: 1;
        transition: opacity 0.4s;
      }
    }
  }
}