[CSS] keeping ratio box

gistfile1.txt

.square {
  //width within the parent
  width: 100%;
  &:before {
    content: "";
    float: left;
    //essentially the aspect ratio. 100% means the
    //div will remain 100% as tall as it is wide, or
    //square in other words.
    padding-bottom: 100%;
  }
  //this is a clearfix. you can use whatever
  //clearfix you usually use, add
  //overflow:hidden to the parent element,
  //or simply float the parent container.
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}