tdesign-react/esm/style/web/components/image/_index.less

TDesign Component for React

// 组件允许单个组件打包，因此默认引入公共基础样式

@import "../../base.less";

@import "./_var.less";

@import "./_mixin.less";

@import "../../mixins/_reset.less";

.@{prefix}-image__wrapper {
  position: relative;
  background: @image-wrapper-bg-color;
  z-index: @image-z-index;

  &--shape {
    &-square {
      border-radius: 0;
    }

    &-round {
      border-radius: @image-radius;
    }

    &-circle {
      border-radius: 50%;
    }
  }

  &--gallery {
    border-radius: @image-gallery-radius;

    .@{prefix}-image {
      position: relative;
      z-index: @image-gallery-cover-z-index;
    }
  }

  &--need-hover {
    cursor: pointer;
  }
}

.@{prefix}-image {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  position: relative;
  z-index: inherit;

  &--fit {
    &-fill {
      object-fit: fill;
    }

    &-contain {
      object-fit: contain;
    }

    &-cover {
      object-fit: cover;
    }

    &-scale-down {
      object-fit: scale-down;
    }

    &-none {
      object-fit: none;
    }
  }

  &--position {
    &-center {
      object-position: center;
    }

    &-bottom {
      object-position: bottom;
    }

    &-top {
      object-position: top;
    }

    &-left {
      object-position: left;
    }

    &-right {
      object-position: right;
    }
  }

  &__gallery-shadow {
    position: absolute;
    left: 0;
    right: -24px;
    top: 24px;
    bottom: 24px;
    background: rgba(238, 238, 238, 26%);
    border-radius: @image-gallery-shadow-radius;
    z-index: calc(@image-gallery-cover-z-index - 2);

    &::before,
    &::after {
      content: "";
      position: absolute;
      left: 0;
      border-radius: @image-gallery-shadow-radius;
    }

    &::after {
      top: -16px;
      right: 16px;
      bottom: -16px;
      background: rgba(238, 238, 238, 80%);
      z-index: calc(@image-gallery-cover-z-index - 1);
    }

    &::before {
      top: -8px;
      right: 8px;
      bottom: -8px;
      background: rgba(238, 238, 238, 50%);
      z-index: calc(@image-gallery-cover-z-index - 3);
    }
  }

  .center() {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__placeholder {
    .center();

    z-index: @image-placeholder-z-index;
  }

  &__overlay-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: calc(@image-gallery-cover-z-index + 1);
    opacity: 1;
    visibility: visible;
    transition: visibility 0s, opacity @anim-duration-base linear;

    &--hidden {
      visibility: hidden;
      opacity: 0;
    }
  }

  &__loading,
  &__error {
    .center();

    z-index: calc(@image-placeholder-z-index + 1);
  }

  &__loading {
    color: @image-loading-text-color;
  }

  &__error {
    color: @image-error-text-color;
  }
}