ratio media - image, video

ratio-media.css

.ratio {
  position: relative;
  width: 100%;
  overflow: hidden;

  &:before {
    content: "";
    display: block;
    padding-top: 75%; /* 4:3 - 75%, 3:4 - 133.33%,  16:9  - 56.25% , 3:2 - 66.66%, 8:5 - 62.5% */
  }

  img {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }

  video {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
  }
}

ratio.html

<div class="ratio">
  <img src="https://xxx">
</div>