jQuery 视口纵横比

Question

我正在寻找一个用于跟踪 SCREEEN 或视口纵横比的公式（如果有任何您知道的指南，您可以 link 我，不一定需要新代码 :)，但到目前为止我只找到了一些图像大小调整相关的主题或在线计算器...)

所以一个问题的核心... 我有一个视频（mp4），就像某种背景。现在，我需要视频覆盖整个屏幕。我知道视频有一定的纵横比，屏幕也有一定的纵横比，所以我同意在某些显示器上某些边缘会被切掉的事实。

但是有一些限制，我需要更改样式：

最多 16:9 - 使用样式 1

从 16:8,99 及更宽 - 你知道，就像那些超宽曲面显示器一样，我需要不同的样式。

那么 - 如果纵横比 比 16:9 宽，如何检查？

到目前为止，我尝试使用此主题中的 GDC（已接受的答案），但我无法使其正常工作（因为每个分辨率都有不同的 GDC，我无法与 16:9 进行比较) Whats the algorithm to calculate aspect ratio? I need an output like: 4:3, 16:9

所以，对于决赛，有代码

function ratiocompare(width, height){
//this I need to create
//sth like 

//if(aspect ratio is any wider than 16:9){return true;}
//else{return false;}
}

function checkratio(){

       var compare = ratiocompare($(window).width(), $(window).width());

       if(compare)
        {  $("#video").css("width","100%");
           $("#video").css("height","auto");
           $("#video").css("left","0");
           $("#video").css("top","50%");
           $("#video").css("transform","translate(0, -50%)");
        }

       else{
           $("#video").css("width","auto");
           $("#video").css("height","130vh");
           $("#video").css("left","50%");
           $("#video").css("top","0%");
           $("#video").css("transform","translate(-50%, 0)");
        }
}

$(document).ready(function() {
 checkratio();
}

那么，有什么提示和解决方案吗？我会非常感激:) 谢谢。

Answer 1

好的，解决方案来自一个数学论坛：除以比率的数字。我们得到的数字是我们可以与其他纵横比比较的数字...

喜欢 16:9 -> 16/9 = 1.77777777 任何大于 1.77777777 的数字都意味着纵横比大于 16:9.

在jquery中：

function gcd(x, y){
    if (y == 0){ return x; }
    return gcd (y, x % y); 
}

function check(){
 var ratio = gcd($( window ).width(), $( window ).height());
 var testratio =  ($( window ).width()/ratio)/($( window ).height()/ratio);

if(testratio>1.7777777{//screen is wider than 16:9, do something}
}

jQuery 视口纵横比

jQuery viewport aspect ratio

jquery

aspect-ratio

screen-resolution