如何获得背景大小：封面;大小和百分比？

Question

我想写一个jQuery插件来动画background-size属性从cover到100%，反之亦然，但我不知道如何获取cover {1}}到百分比值，是否可以获得调整大小的背景图像的宽度和高度？

我知道我可以获得$('#selector').css('backgroundSize')但是我得到cover并且我希望将其转换为背景图片的当前宽度和高度，我该怎么做？

Answer 1

如果您可以获取图像的尺寸，则可以根据图像为background-image的容器尺寸进行检查。您可以使用这两条信息将cover转换为百分比。

要获取图像的尺寸，请创建一个img元素进行测试：

$('<img />').bind('load', function () {
    //the image has loaded, you can now get it's height/width
}).addClass('offScreen').attr('src', '...');

offScreen类用于在加载时将元素移出屏幕，以便用户看不到它：

.offScreen {
    position : absolute;
    left     : -9999px;
}