16：9宽高比，固定宽度

如果我要嵌入YouTubevideo，例如

使用jQuery我会设置一个高度为16：9的高度，所以如果宽度为560，则高度应为315px。
我有这个jquery设置高度，但我不知道如何应用16：9的比例

 $('.player').parent().attr('width', ':9ratio'); 

或者这可以用css整齐地完成吗？

Answer 1

宽高比只是宽度：高度。 因此，如果您想根据已知宽度计算高度，则非常简单。

 //width=560, wanted height is 315 $('.player').parent().attr('height', 560*9/16); 

Answer 2

我建议使用css calc而不是jQuery：

 width: 560px; height: calc(560px * 9/16); 

Answer 3

 $('.player').parent().attr('width', 560*9/16) 

Answer 4

很老的问题，但如果有人仍在寻求答案，这可能是一个更好的方法。

     function getRelativeWidth（ratio，crntHght）{
         ratio = ratio.split（“：”）;
         var wdthRto = ratio [0];
         var hghtRto = ratio [1];
         return（（wdthRto * crntHght）/ hghtRto）; 
     }

     function getRelativeHeight（ratio，crntWdth）{
         ratio = ratio.split（“：”）;
         var wdthRto = ratio [0];
         var hghtRto = ratio [1];
         return（（crntWdth * hghtRto）/ wdthRto）; 
     }
     var wdth = 1600;
     var hght = 900;
     var getHeight = getRelativeHeight（“16：9”，wdth）; 
     var getWeight = getRelativeWidth（“16：9”，hght）; 

    的console.log（的getHeight）;
    的console.log（getWeight）;