<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;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.