我有一个 div，我在其中将背景设置为某个图像。例如，div 为 300x300，而原始背景图像大小为 200x200。
我想按相对于自身的特定百分比缩放背景图像。例如，如果我要按 200% 缩放，我希望背景图像现在为 400x400 像素并被稍微切掉。但我能找到的唯一 css 属性是 background-size 属性，它相对于父 div 按百分比缩放(例如，缩放 200% 时，背景图像将变为 600x600 ).
有没有办法实现相对于背景图片本身的缩放？
最佳答案
所以我实际上找到了一种使用纯 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>
关于css - 相对于自身大小缩放背景图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24477133/