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

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

esl-image {
  display: block;
  width: 100%;
  padding: 0;
  text-align: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
esl-image[lazy]:not([ready]) {
  min-height: 1px;
}
esl-image[mode='origin'] {
  display: inline-block;
  width: auto;
  height: auto;
}
esl-image[mode='cover'] {
  height: 100%;
}
esl-image[mode='save-ratio'] {
  height: 0;
}
esl-image[mode='inner-svg'] svg {
  max-width: 100%;
  max-height: 100%;
}
esl-image .inner-image {
  max-width: 100%;
}
esl-image::after {
  display: none;
  content: attr(alt);
}
esl-image[error]::after {
  display: inline-block;
}
esl-image[loaded]::after {
  display: none;
}
esl-image[mode='fit'][error]::after,
esl-image[mode='origin'][error]::after {
  display: none;
}
esl-image.bg-flex {
  background-size: 100% 100%;
}
esl-image.bg-inscribe {
  background-size: contain;
}
esl-image.bg-v-top {
  background-position-y: top;
}
esl-image.bg-v-center {
  background-position-y: center;
}
esl-image.bg-v-bottom {
  background-position-y: bottom;
}
esl-image.bg-h-left {
  background-position-x: left;
}
esl-image.bg-h-center {
  background-position-x: center;
}
esl-image.bg-h-right {
  background-position-x: right;
}
.img-container {
  position: relative;
  overflow: hidden;
}
.img-container:not(.img-container-auto) esl-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.img-container:not(.img-container-auto) esl-image[mode='origin'],
.img-container:not(.img-container-auto) esl-image[mode='save-ratio'] {
  position: relative;
}
.img-container:not(.img-container-auto) esl-image[mode='fit'] {
  position: static;
  overflow: hidden;
}
.img-container:not(.img-container-auto) esl-image[mode='fit'] > .inner-image {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
}
@supports (object-fit: cover) {
  .img-container:not(.img-container-auto) esl-image[mode='fit'] > .inner-image {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
    object-fit: cover;
  }
}
.img-container esl-image[lazy] {
  opacity: 0;
}
.img-container esl-image[lazy][ready] {
  opacity: 1;
  transition: opacity 0.4s;
}