@zhangmmm/ming-ui/src/components/image/style/index.less

基于 react 的组件库

@import '../../style/index.less';

@image-prefix-cls: ~'@{ming-prefix}-image';

.size() {
  width: 100%;
  height: 100%;
}

.@{image-prefix-cls} {
  position: relative;
  display: inline-block;

  &-inner {
    .size;
  }

  &-placeholder,
  &-error {
    .flex-center-both;
    .size;
    color: @M4;
    background-color: @M6;
    word-break: break-all;
  }

  &-preview {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100vh;

    &-mask {
      .mask-style;
      z-index: -1;
    }

    &-close {
      position: absolute;
      right: 50px;
      top: 30px;
      z-index: 1;
      font-size: 32px;
      cursor: pointer;
    }

    &-viewer {
      .flex-center-both;
      width: 100%;
      height: 100%;
    }

    &-img {
      transition: transform 0.3s;

      &-contain {
        max-width: 100%;
        max-height: 100%;
      }

      &-original {
        max-width: auto;
        max-height: auto;
      }
    }

    &-actions {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      padding: @Sp-4 @Sp-6;
      border-radius: 23px;
      background-color: @M3;

      .anticon {
        font-size: 24px;
        color: #ffffff;
        margin: 0 @Sp-4;
        cursor: pointer;
        user-select: none;
      }
    }
  }
}