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

Question

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

我想按相对于自身的特定百分比缩放背景图像。例如，如果我要按 200% 缩放，我希望背景图像现在为 400x400 像素并被稍微切掉。但我能找到的唯一 css 属性是 background-size 属性，它相对于父 div 按百分比缩放(例如，缩放 200% 时，背景图像将变为 600x600 ).

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

Answer 1

所以我实际上找到了一种使用纯 css 来完成此操作的方法。我遇到的问题当然是 background-size 相对于我们设置背景的 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>