@mixin image-fit($heightaspect) {
  /* image fit */
  position: relative;
  display: inline-block;
  overflow: hidden;
  text-align: center;

  img {
    position: absolute;
    object-fit: fill !important;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    &.landscape {
      min-width: 100%;
      height: auto;
    }

    &.portrait {
      min-height: 100%;
      width: auto;
    }
  }

  &:after {
    content: "";
    display: block;
    padding-bottom: 100% * $heightaspect;
  }
}