根据宽度/高度更改背景大小

Question

我在WordPress网站上使用Simple Masonry gallery插件。它将图像显示为darkbox div的背景。

桌面版中的一切都运行正常，但问题出现在移动版本中，其中一个图像具有很高的高度和非常薄的图像。我将背景大小设置为百分比，但它没有帮助 - 图像被剪切掉，不适合（背景大小为60％），但其余图像非常小。

我不想使用background-size：contains，因为我需要一些空间，一种边框。

问题是： 如何在以下情况下使用jquery更改background-size： 高度是宽度的2倍？或宽度的3倍？

有没有解决方案？

这是它应该是什么样的图像（并且应该使用较小的图像）：

这是一个更大的图像看起来如何：

这是背景代码：

    public static void Main(string[] args)
    {
        Action[] actionsArray =
        {
            () => MethodA(),
            () => MethodB1()
        };

        Parallel.Invoke(actionsArray);
        MethodB2();
    }

    private static void MethodA()
    {
        Console.WriteLine("A");
        Thread.Sleep(3000);
        // more code is running here (30 min)
    }

    private static void MethodB1()
    {
        Console.WriteLine("B1");
        Thread.Sleep(200);
        // more code is running here (2 min)
    }

    private static void MethodB2()
    {
         Console.WriteLine("B2");
    }

宽度和高度需要保持与div必须覆盖背景相同。

Answer 1

您可以使用“window”对象执行此操作$(window).width() / $(window).height()。这样您就可以获得页面的宽度和高度。之后，您可以计算一些内容并使用它：http://api.jquery.com/css/ - $('someobject').css( background-size, something )

从css中移除！important。它不好......

Answer 2

对不起我以前用波兰语发表的评论。我用过它。代码是：

<script> $(document).ready(function(){ if( ($(window).height()*2) === $(window).width() ) { $('#darkbox').css( background-size, 50% ) } }; </script>

然而，仍然无法正常工作。看看 - The background size still isn't right, not 50% as set

问题是，有很多图片，我需要更改背景尺寸，其他图片可以正常使用我的CSS设置