<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(1200/1920*50%) 50%;
  background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201312%2F31%2F111859myvyiivetyftfz2n.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611762336&t=305cb3cf243544000bd9af87a84cc4d1);
  background-size: cover;
}
@keyframes resize {
  to {
    width: 100px;
    height: 200px;
  }
}