html - 缩放 div 背景图像

Question

我有一个 png，上面有各种社交登录按钮图像。我可以使用以下 CSS 类让它们只显示我想要的图像:

.sign-in-with-facebook {
    width: 430px;
    height: 88px;
    background-image: url("/static/social-media-icons/social-sign-in-buttons.png");
    background-position: -184px -110px;
}
.sign-in-with-google {
    width: 430px;
    height: 88px;
    background-image: url("/static/social-media-icons/social-sign-in-buttons.png");
    background-position: -184px -401px;
}
.sign-in-with-twitter {
    width: 430px;
    height: 88px;
    background-image: url("/static/social-media-icons/social-sign-in-buttons.png");
    background-position: -184px -207px;
}

然后像下面这样添加 div 将使我的图像出现在我的页面上:

<div class="sign-in-with-twitter"></div>

首先，这是处理这样一张图片的合理方法吗？

其次，我的主要问题是我想缩小这些按钮，使它们更小，因为它们在原始 png 中相当大。我试过使用 background-size、max-width、max-height，将它们包裹在另一个 div 中，等等，但没有成功迄今为止。非常感谢您的帮助!

Answer 1

1. 是的!这是一种合理的命名方式 Spriting
2. 最好的方法是缩小它，使用一些光栅编辑工具(如 photoshop)