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.