javascript - 如何获取背景大小 :cover; size and percent?

Question

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

我知道我可以获得 $('#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;
}