Css 相对于背景图像自身大小缩放背景图像？

我有一个div，其中我将背景设置为某个图像。例如，假设div为300x300，原始背景图像大小为200x200

我想将背景图像相对于自身按一定比例缩放。例如，如果我要按200%缩放，我希望背景图像现在为400x400像素，并稍微被切掉。但是我能找到的唯一css属性是

background size

属性，它以相对于父div的百分比进行缩放（例如，使用200%的缩放，背景图像将变成600x600）

---

有没有办法实现相对于背景图像本身的缩放？

在这种情况下，您可以设置

背景大小：67%。因此，背景图像占父div的67%


backgorund 300x300分区201x201
600x600分区，backgorund 402x402X

问候语
您可以使用JavaScript

看这个。。。（）

HTML
JavaScript
希望这能对你有所帮助。
所以我实际上找到了一种使用纯css的方法。当然，我遇到的问题是，
背景大小
相对于我们设置背景的div进行缩放，而不是图像大小本身

解决方法是，我们可以使用所需的宽度和高度将div包装在父div中，然后将内部div的宽度和高度设置为我们正在使用的背景图像的宽度和高度。这样，我们可以根据背景的大小缩放内部div，因为它们的大小相等，然后通过将父级设置为overflow:hidden来裁剪出正确的大小

*唯一需要注意的是，我们必须使用服务器端渲染将内部div的宽度和高度设置为图像的宽度和高度，而不使用javascript

例如：

<div style="width: 300px; height: 300px; overflow: hidden;">
    <div style="width:{{bgimgwidth}}; height:{{bgimgheight}}; background: url('{{url}}'); background-size: 200%;">
    </div>
</div>


您是否尝试过背景尺寸：封面；背景图像的大小将是可变的。这就是为什么我特别说我需要相对于图像本身的大小进行缩放，而不是相对于父分区。我明白了，对不起。您想只使用css来实现这一点吗？我可以告诉你如何使用javascript来实现这一点，我当然更愿意只使用css来实现这一点，但这似乎是不可能的。因此，当然，请随意将js解决方案发布到这里。
#box{
    background: #fff center no-repeat;
    background-image: url(http://images2.layoutsparks.com/1/84256/batman-logo-black.jpg);
    width: 500px;
    height: 500px;
}

window.onload = function() {
    var img = document.getElementById('box'),
    style = img.currentStyle || window.getComputedStyle(img, false),
    bi = style.backgroundImage.slice(4, -1);

    var imageSrc = bi.replace(/url\((['"])?(.*?)\1\)/gi, '$2').split(',')[0];     

    var image = new Image();
    image.src = imageSrc;

    var width = image.width,
        height = image.height;

    document.getElementById('box').style.backgroundSize = (width * 2.00) + 'px ' + (height * 2.00) + 'px'; 
}

<div style="width: 300px; height: 300px; overflow: hidden;">
    <div style="width:{{bgimgwidth}}; height:{{bgimgheight}}; background: url('{{url}}'); background-size: 200%;">
    </div>
</div>