Question

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

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

jQuery - 创建一个宽高比为16：9的元素

2 个答案: