获取背景图像高度并将其用作关键帧动画中的变量

Question

我尝试实现一个元素（#web_row）上下移动与其背景图像高度相同的像素值的结果。 它也应该适用于不同的屏幕尺寸。 我实现这一目标的计划非常简单：

1. 获取背景图片的高度。
2. 与屏幕尺寸（响应性）成比例地计算它。
3. 使用从 0 到 -{background-image height}px 的 translateY 为元素设置动画。 我的代码如下所示：

    // Get background image's height
        function bgSize($el, cb){
            $('<img />')
                .load(function(){ cb(this.width, this.height); })
                .attr('src', $el.css('background-image').match(/^url\("?(.+?)"?\)$/)[1]);
        }
        // Calculate the actual height, because the #web_row background images will always have 100% window width, only the height is different
            bgSize($('#web_row'), function(width, height){
                var myVw = parseInt($(window).width()),
                    newHeight = height * myVw / 1920;
        // Animate it...
                    $(this).animate([
                      // Keyframes
                      { transform: 'translateY(0px)' }, 
                      { transform: 'translateY(-'+newHeight+'px)' }
                    ], { 
                      duration: 7000,
                      iterations: 2
                    });
            });

我觉得我离解决方案越来越近了，但是在经过几个小时的努力之后，我需要请您帮我一把。

注意：我尝试让它在 WordPress 上运行，因此无法使用更复杂的工具/解决方案，例如 Compass。

预先感谢您的帮助！