Edit in JSFiddle

<div class="wrapper">
     <div class="main">
         This is your div with the specified aspect ratio. 
         <br/><br/><br/>
         Resize window to see the result
     </div>
</div>

.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 {
 text-align:center;   
 position: absolute;
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;
 /* fill parent with color */
 background-color: deepskyblue;
 color: white;
}