Quite a common issue I come across with responsive front end development is setting a height in relation to the width of an element. For example. If you are creating a div that you wish to keep a square. If the site is fixed width you can easily set the height, but when the site responsive the width of the div changes as so fixing the height doesn’t work.
I can’t find any CSS solution for this but its pretty easy to do with jQuery.
All you have to do is grab the width value of the element and set the height as the same value. If you make sure this code is triggered on window.resize it will match the width as you resize the window on the fly.
I have made a jsfiddle as an example which you can see on the link below. Hopefully this can help someone.
https://jsfiddle.net/dgjn40jv/