(CSS) Simplest solution for a title image stretch?

So I'd like the top of my pages to feature an image that stretches to fill the width at all times, while maintaining a specific overall aspect ratio. For the sake of argument, let's say cinematic 16:9 (or 1.777777) -- so if the viewport is 800px wide, the image will be 450px high (and follow in real-time if that width changes) -- then, the rest of the flow of the page.

I really like using divs for everything, so I'd favor a div background solution over an img src one, but will default to whatever the best available solution is. I did try background-size: cover already -- which opened up some interesting new UX avenues -- but iOS seems to have serious issues with it; So I told myself that perhaps a more traditional "fit to width and retain proportions" approach might yield friendlier results. Of course, as a designer, I could be underestimating the complexity of what I'm describing.