As Web application developer, sometime you fall into a situation that needs a DIV with specific aspect ratio, it’s easily be done by JavaScript. But you could have same result by only CSS.
Today I want to show you how to do that by CSS.
Firstly, Create Div structure like below:

<div class="wrapper">
<div class="main">
This is your div with the specified aspect ratio.
</div>
</div>

Then we are going to set aspect ratio of main div to a specific one by following CSS statements:

.wrapper {
width: 50%;
/* whatever width you want, depends on your purpose */
display: inline-block;
position: relative;
}
.wrapper:after {
padding-top: 56.25%;
/* this is the key thing, the percentage value is converted from 16:9 ratio. So you can set it to any aspect ratio you want ex: 4:3 = 75% */
display: block;
content: '';
}
.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
/* fill parent with color */
background-color: deepskyblue;
color: white;
}

 Preview: