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

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

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

这是一个概念validation小提琴： 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();});