Controlling the aspect ratio of a DIV element

13th of October 2015 ~ filed in css, the ugli site, tips, responsive design

In responsive design, it is often necessary to control the aspect ratio (ratio of width to height) of an element whose width is unknown. An image will (by default) maintain its aspect ratio at any width, but for example a <DIV> element set to width 100% will only be as 'high' as its contents unless it is given a specific height. If it has a specific height, this will not adjust as the width of the browser window changes.