jQuery - create an element with 16:9 aspect ratio

Question

I am actually working on an image gallery which contains thumbnails of some videos I made. For this, I calculate the with of the gallery through the following code.

$(function() {
$(window).resize(function() {
    var width = $(this).width() - 200;
    $("#gallery").css("width", width);
}).resize();});

Now each image should have an 16:9 aspect ratio. Therefore, I have to divide the width of the gallery width 16 and multiply this value with 9. Doesn't seem to be that hard but actually I am stuck. Hopefully someone can help me, thanks!

Answer 1

You should recalculate the element height:

$(function() {
    $(window).resize(function() {
        var width = $(this).width() - 200;
        $("#gallery").css({
            "width": width,
            "height": width*(9/16)
        });
    }).resize();
});

Here's a proof-of-concept fiddle: http://jsfiddle.net/teddyrised/w555h/6/

Answer 2

Try this:

$(function() {
$(window).resize(function() {
    var width = $(this).width() - 200;
var ratio = 16 / 9.0;
    $("#gallery").css("width", width).css("height", Math.round(width * ratio));
}).resize();});