Responsive Height, Maintain Ratio

Say you have an element #banner with a background-image. On a responsive design that’s width:100%; you’ll notice your image will be auto croped by the viewport change. The solution is simple: background-size: cover; but a pain that follows is the height of the element will not scale down or up with the width change, leaving this weird empty vertical gap or a very cropped image.

Here’s a fix to figure out and change the height end_h based on the current window width, keeping background-image ratio making it responsive/scalable:

This resize happens when your script is loaded, as well as on any browser resize event.


Leave a Reply

%d bloggers like this: