Trying to force an aspect ratio on a container within a container

Imagine a simple container acting as a column, like a newspaper's. Inside this column will be paragraphs of text, and the occasional image. The column's actual width will fluctuate with different screen resolutions.

I rarely use straight-up IMG tags, so the image will actually be either a DIV or A (with background-image applied) set to 100% width. As for the height, I'd like that to be proportionately 16:9 with the width. The background-size will be cover, so clipping is expected and even welcome for non-16:9 sources.

TL;DR  No matter how wide or narrow that column is set to be, the DIV or A inside should adjust its height to maintain that 16:9 aspect ratio with the 100% width.

Thanks!

PS: Ideally, I would like to do this with CSS alone. If it can't be done without jQuery, then I'll take it as Plan B. If it can't be done at all with those two technologies, I'll just drop the idea.