計算css cover的比例

2016-06-04

透過js計算出css background image cover的值,從這邊我們可以找出相關的背景縮放比例用來apply在其他物件上

function fnTransform(){
        var imgWidth = 1702;     // 原始圖片長寬
        var imgHeight = 964;

        var containerWidth = $("#slide3").width();   //外框的長寬
        var containerHeight = $("#slide3").height();
       
        //計算出比例

        var imgRatio = (imgHeight / imgWidth);      //原始圖片的長寬比
        var containerRatio = (containerHeight / containerWidth);     //外寬的長寬比
       
       //計算新的長寬
       var finalWidth;
       var finalHeight;
       var setRatio;

        if (containerRatio > imgRatio) 
        {
            finalHeight = containerHeight;
            finalWidth = (containerHeight / imgRatio);
        } 
        else 
        {
            finalWidth = containerWidth;
            finalHeight = (containerWidth / imgRatio);
        }

        setRatio = finalWidth/imgWidth;

        $("#btn-group-wrap").css("transform","scale("+setRatio+")");
        console.log('winH/defH:'+setRatio);
    }

來源: http://stackoverflow.com/questions/10285134/whats-the-math-behind-csss-background-sizecover 

Contact

Github

Codepen

歡迎參觀我的賣場
© 2013 Copyright Digishot Web | Design Tools
Visitors【630656】
digishot webdesign studio