amis2/scss/components/_images.scss

.#{$ns}Images {
  display: flex;
  flex-wrap: wrap;
  margin: -$gap-xs;

  &-item {
    display: flex;
    margin: $gap-xs;
  }
}

.#{$ns}Image {
  display: inline-block;
  border: $borderWidth solid $borderColor;
  padding: $gap-xs;

  &-thumb {
    width: px2rem(108px);
    height: px2rem(108px);
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwMCIgaGVpZ2h0PSI0MDAiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgICAgICAgIDxyZWN0IGZpbGw9ImJsYWNrIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIG9wYWNpdHk9IjAuMSIgLz4KICAgICAgICAgICAgPHJlY3QgZmlsbD0id2hpdGUiIHg9IjEwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIC8+CiAgICAgICAgICAgIDxyZWN0IGZpbGw9ImJsYWNrIiB4PSIxMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgb3BhY2l0eT0iMC4xIiAvPgogICAgICAgICAgICA8cmVjdCBmaWxsPSJ3aGl0ZSIgeD0iMCIgeT0iMTAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgLz4KICAgICAgICA8L3BhdHRlcm4+CiAgICA8L2RlZnM+CiAgICA8cmVjdCBmaWxsPSJ1cmwoI2dyaWQpIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiAvPgo8L3N2Zz4=");
    overflow: hidden;
    position: relative;

    > img {
      position: absolute;
      left: 50%;
      top: 50%;
      height: 100%;
      width: auto;
      transform: translate(-50%, -50%);
    }
  }

  &-thumb--4-3 {
    height: px2rem(108px * 3 / 4);
  }

  &-thumb--16-9 {
    height: px2rem(108px * 9 / 16);
  }

  &-thumb--w-full > img {
    width: 100%;
    height: auto;
  }

  @supports (object-fit: contain) {
    &-thumb--contain > img {
      position: static;
      width: 100% !important;
      height: 100% !important;
      transform: translate(0, 0);
      top: 0;
      left: 0;
      object-fit: contain;
    }
  }

  @supports (object-fit: cover) {
    &-thumb--cover > img {
      position: static;
      width: 100% !important;
      height: 100% !important;
      transform: translate(0, 0);
      top: 0;
      left: 0;
      object-fit: cover;
    }
  }
}

.#{$ns}ImageField {
  display: inline-block;
  position: relative;
}