如何动态调整CSS按钮精灵（背景图像）的大小？

使用CSS，如何制作按钮图像

background:url（）相对于父div的缩放比例？父div居中，并根据视口宽度设置为缩放
vw
。


有什么想法吗

编辑
这里重要的是缩放到视口宽度，而不是父div


正文{
背景色：rgb（0,0,0）；
边际：0px；
边框：0px黑色；
填充：0px；
}
#母公司{
背景颜色：灰色；
宽度：80vw；
字号：0；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
a{
高度：200px；
显示器：flex；
}		
#αa{
宽度：200px；
背景：url（“https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png") 0 0;      	
}	
#阿尔法a：悬停{
宽度：200px；
背景：url（“https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png）200px 0；
}            
#βa{
宽度：200px；
背景：url（“https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png") 0 0;     	
} 
#贝塔a：悬停{
宽度：200px；
背景：url（“https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png）200px 0；
}
您可以使用背景大小进行设置，因为您的图像与按钮一样高，但宽度是按钮的两倍，您可以使用“背景大小：200%100%；”

然后要将图像“切换”到下一个图像，可以将位置更改为100%


正文{
背景色：rgb（0,0,0）；
边际：0px；
边框：0px黑色；
填充：0px；
}
#母公司{
背景颜色：灰色；
宽度：80vw；
字号：0；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
a{
高度：100px；
显示器：flex；
}		
#αa{
宽度：100px；
背景：url（“https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png") 0 0;
背景大小：200%100%；
}	
#阿尔法a：悬停{
宽度：100px；
背景：url（“https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png") 100% 0;      
背景大小：200%100%；
}            
#βa{
宽度：100px；
背景：url（“https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png")0 0;
背景大小：200%100%；
} 
#贝塔a：悬停{
宽度：100px；
背景：url（“https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png") 100% 0; 
背景大小：200%100%；
}

background size:100%100%-->假设您的按钮的宽度和高度为父级的100%。。。否则，请使用适当的百分比值按钮在哪里？粉红色圆圈是我的测试按钮。它们是在悬停时变绿的精灵。它们后面的灰色框是父容器。背景大小：100%没有为meThanks工作过，大卫为小费。设置背景尺寸确实有助于最终添加大众。解决方案如下。@logologist我相信只要精灵的高宽比相同。或者如果不是，如果你改变%来匹配新的比率。这样，当然，粉红色按钮不再都是粉红色的。粉红色表示所需的“未悬停”状态，而浅绿色表示所需的悬停状态。@logologist这仅仅是因为我更改了beta的未悬停状态，以显示它可以以任何方式完成。我现在已经改变了这个例子是的，我看到了。如果我希望图像根据父div的大小缩小，该怎么办？这个解决方案还有效吗？最终，我希望在调整浏览器窗口的大小时，图像能够从其最大大小缩小。@Logologist是的，我制作了一个JSFIDLE，它会随着浏览器的高度而变化。你可以看到精灵工作得很好