<main class="container">
  <div class="box"></div>
</main>

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.container {
  display: flex;
  align-items: center;
  width: 300px;
  height: 300px;
  border: 1px dashed #333;
  animation: resize 5s linear infinite alternate;
}
.box {
  padding: calc(600/800*50%) 50%;
  background-image: url(https://source.unsplash.com/random/800x600);
  background-size: cover;
}
@keyframes resize {
  to {
    width: 100px;
    height: 200px;
  }
}