jQuery-创建宽高比为16:9的元素

问题描述

我实际上是在一个图片库中，其中包含我制作的一些视频的缩略图.为此，我通过以下代码计算图库的with.

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();});

现在，每个图像应具有16:9的宽高比.因此，我必须将画廊宽度16的宽度除以9并乘以该值.这似乎并不难，但实际上我陷入了困境.希望有人可以帮助我，谢谢！

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!

推荐答案

您应该重新计算元素高度:

You should recalculate the element height:

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

这是一个概念验证小提琴: http://jsfiddle.net/teddyrised/w555h/6/

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

这篇关于jQuery-创建宽高比为16:9的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！