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

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

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

---

现在，每个图像的纵横比应为16:9。因此，我必须将画廊的宽度除以16，然后将这个值乘以9。看起来没那么难，但实际上我被卡住了。希望有人能帮助我，谢谢

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

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

---

这里有一个概念验证提琴：

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

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

这里有一个概念验证提琴：

试试这个：

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

试试这个：

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

---

高度=宽度*（9/16）@Rorymcrossan：这是答案，不是评论如果在图像上仅设置一个尺寸（高度或宽度），则会自动计算另一个尺寸以匹配图像形状。你不必两个都设置。@jfriend00:这不是我的经验。编辑…但一个快速的实验表明这是真的！使用脚本：使用老式的

width

和

height

attrs:Using CSS:@T.J.Crowder说实话，我甚至不确定OP需要将其应用到什么元素，所以我将其保留在那里：）

height=width*（9/16）@Rorymcrossan：这是答案，不是评论如果在图像上仅设置一个尺寸（高度或宽度），则会自动计算另一个尺寸以匹配图像形状。你不必两个都设置。@jfriend00:这不是我的经验。编辑…但一个快速的实验表明这是真的！使用脚本：使用老式的
width
和
height
attrs:Using CSS:@T.J.Crowder老实说，我不确定OP需要应用到哪个元素，所以我将它保留在那里：）这将是一个浮点高度（例如十进制数）。这真的是你想要的吗？浏览器将通过将浮点高度转换为整数来处理浮点高度。浏览器在呈现整数或浮点值的速度上存在差异，但这并不重要@Terry:我完全不确定我认为衡量浏览器设置
className
所需的时间与它在分数CSS值上花费的时间有关，尤其是在静态
样式
元素中指定它们时。（这是我对答案（不是评论）的+1。[事实上很有趣，有人应该投票给评论而不是答案！]）@T.J.Crowder现在你让我很紧张。。。让我再检查一下我引用的例子：P@Terry：要真正测试这一点，您必须测试浏览器回流。我很确定浏览器足够智能，能够足够快地处理分数值，以满足我们的需要。：-）例如，我不相信测试用例，但我相信它无关紧要。这将是一个浮点高度（例如十进制数）。这真的是你想要的吗？浏览器将通过将浮点高度转换为整数来处理浮点高度。浏览器在呈现整数或浮点值的速度上存在差异，但这并不重要@Terry:我完全不确定我认为衡量浏览器设置
className
所需的时间与它在分数CSS值上花费的时间有关，尤其是在静态
样式
元素中指定它们时。（这是我对答案（不是评论）的+1。[事实上很有趣，有人应该投票给评论而不是答案！]）@T.J.Crowder现在你让我很紧张。。。让我再检查一下我引用的例子：P@Terry：要真正测试这一点，您必须测试浏览器回流。我很确定浏览器足够智能，能够足够快地处理分数值，以满足我们的需要。：-）例如，我不相信测试用例，但我相信它并不重要。