Aspect Ratio + Media Queries

Always a square on the left side, increasing the right side proportional width once resolution is down to iPhone size

HTML

<div class='item'>

</div>

CSS

/* Based off of: http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */

.item {
  width: 
   background-color: red;
   position: relative;
   width: 100%;
   padding-top: 120.25%; /* 16:9 Aspect Ratio */
}