.carbon-image {
  width: 100%;
  height: auto;
  max-width: none;

  &:not([src]) {
    visibility: hidden;
  }
}

.carbon-image--cover {
  &.lazyloaded,
  &.lazyloading,
  &.lazyload {
    object-fit: cover;
    height: 100%;
    font-family: "object-fit: cover";
  }

  @supports (object-fit: cover) {
    object-fit: cover;
    height: 100%;
  }
}

.carbon-image--contain {
  &.lazyloaded,
  &.lazyloading,
  &.lazyload {
    object-fit: contain;
    height: 100%;
    font-family: "object-fit: contain";
  }

  @supports (object-fit: contain) {
    object-fit: contain;
    height: 100%;
  }
}

.carbon-image--cover,
.carbon-image--contain {
  &.lazyloaded {
    height: 100% !important;
  }
}