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

[Under S.]

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.

[Jon Fritz · Accepted solution]

This should do the trick...

<style>
.aspect-container {
position: relative;
padding-bottom: 56.25%; 
height:0;
background-size:cover;
background-image:url("_images/16by9.jpg");
}
</style>

Make a div container with class="aspect-container" and leave it empty. Then just swap out the image path to your 16:9 image.

[Under S.]

From a purely logical standpoint, I don't see why that bit of code wouldn't work. Thanks!

Any drawbacks to this method? Specifically with regards to applying it on 'A' (ie link) objects? I don't suppose replacing the content area with pure padding would change much, at least at first glance... that area would still be considered within the boundaries of the box, so it would all still be clickable; but I figured I'd ask anyway.

[Jon Fritz]

If you want to use it on something that doesn't have block as it's default display value, like the <a> tag, you'll need to add display:block to the css. 

Just in case you ever need 3:2 or 4:3 aspect ratios, you'd just replace the padding-bottom with one of the following...

padding-bottom: 66.66%;  /* 3:2 */
padding-bottom: 75%;  /* 4:3 */

[Under S.]

In this case, display: block was already applied (and is hardly a limitation). I now feel safe marking your answer as correct. Thanks again!