Масштабирование фоновых изображений

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 class="sign-in-with-twitter"></div> 

Первых это разумный способ обработки «листа» изображений, подобных этому?

Во-вторых, моя основная проблема заключается в том, что я хочу затем масштабировать эти кнопки, чтобы они были меньше, поскольку они довольно большие в исходном png. Я пробовал играть с background-size, max-width, max-height, обернув их в другой div и т. Д., Пока не повезло. Помощь будет очень признательна!

Answer 1

1. Да! это разумный способ назван Spriting
2. Самый лучший способ, чтобы сократить его, используя некоторые растровые инструмент для редактирования (например Photoshop)