透過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