.direct, .pseudo, .image {
  width: 10%;
  background: gold;
  animation: 5s linear rwd infinite alternate;
}

@keyframes rwd {
  from {
    width: 10%;
  }
  to {
    width: 30%;
  }
}

.direct {
  position: relative;
}
.direct > .wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}
.direct > .wrapper > .content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.pseudo {
  position: relative;
}
.pseudo:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 56.25%;
}
.pseudo > .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.image {
  position: relative;
}
.image > img {
  position: absolute;
  width: 100%;
  object-fit: contain;
}
.image > .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}