On the DJ Vadim website I needed to create a gallery of album covers that displayed each cover in a perfect square, but was also responsive and would resize dynamically on various screen sizes. I could have declared a whole variety of CSS values for each media breakpoint, but I wanted a much more elegant solution. I settled on the following:
Check the J Fiddle
The solution is to give the containing hyperlink for each thumbnail a width off 100%, and a height of 0. The square is calculated by a bottom padding of 100%. The image itself is applied as a background image to the hyperlink, and sized using the CSS property background-size.
This is a usefull method for creating a featured flag overlayed on top of an image or content. The flag uses the CSS transform property, and is anchored to the left corner so that it remains in the same position on all screen sizes.
<span class="flag"> Featured </span>
background: #ff842c none repeat scroll 0 0;
padding: 10px 0;
transform-origin: left top 0;