Использования фонового изображения в качестве изображения

Question

У меня есть большое изображение с смайликами и использовать его как это:

Css:

.emoticon { 
    width: 26px; 
    height: 26px; 
    display: inline-block; 
    vertical-align: top; 
    background-image: url(path/to/image.png); 
    background-repeat: no-repeat; 
    background-size: auto; 
} 
emoticon.emoticon_1 { background-position: 0 -869px } 

Html:

<div class='emoticon emoticon_1'></div> 

Проблема заключается в том, что оригинальный размере смайликов 26x26 px, это слишком lage. Есть ли способ трансформировать изображение в формате 16x16 px через css?

Answer 1

попробуйте использовать background-size по-разному (вы можете задать ширину и высоту, будь он содержится внутри или покрывает элемент он назначен):

.emoticon { 
 
    width: 26px; 
 
    height: 26px; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    background-image: url("http://tigerhousecorbett.com/_include/img/work/full/image-14-full.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-size: 16px 16px; 
 
} 
 
emoticon.emoticon_1 { background-position: 0 -869px }

<div class='emoticon emoticon_1'></div>

Подробнее о том, что background-size может сделать : https://developer.mozilla.org/en-US/docs/Web/CSS/background-size