jquery - jQuery - 创建一个具有 16:9 纵横比的元素

Question

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

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

现在每个图像应该有一个 16:9 的纵横比。因此，我必须将画廊宽度的宽度除以 16 并将这个值乘以 9。看起来并不难，但实际上我被卡住了。希望有人可以帮助我，谢谢！

Answer 1

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

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

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

Answer 2

试试这个：

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