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