/* This container keeps its aspect ratio */
/* padding-bottom actually sets the height proportionally to the width – yep, doesn’t seem logical right? */
.container {
position: relative;
height: 0;
padding-bottom: 50%;
}

/* properly aspected element inside the container */
.element {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}