javascript - ccs3 属性背景大小 :cover mechanism

Question

我已经将 backgroundsize:cover 用于图像，它的工作非常完美，但问题是如何获得在任何屏幕尺寸上的图像尺寸。

我想计算得到图像渲染的高度和宽度，我有原始图像的高度和宽度，屏幕尺寸和我

Answer 1

var screenWidth = 1366; //width of screen or element need to show
var screenHeight = 768;//heightof screen or element need to show
var originalImageWidth = 800; // original image width
var originalImageHeight = 600; // original image height

var backgroundHeight,backgroundWidth;

//default scale by height of screen 
backgroundHeight = screenHeight ;
backgroundWidth= backgroundHeight * originalImageWidth / originalImageHeight;
if ((screenWidth - backgroundWidth) > 0) {//if width of scale images is smaller screen show, begin scale by width
    backgroundWidth = screenWidth;
    backgroundHeight = screenWidth * originalImageHeight / originalImageWidth;
}

然后使用 css background-size percent

$(element).css({"background-size":(backgroundWidth+"px"+" "+backgroundHeight+"px")});