Controlling the aspect ratio of a DIV element

20th of April 2018 ~ 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.