JSFiddle - React, Tailwind, and code Playground

by Pasky Org

HTML

Sprite background stretch
with CSS background-size
<div id="sprite1">
    Dragon
</div>

Sprite background stretch with transform
<div id="sprite2">
    Dragon
</div>

<b>Original sprite sheet</b>
<img src="http://icons.iconarchive.com/icons/cjdowner/cryptocurrency/64/ICON-icon.png" />

CSS

#sprite1{
    height: 80px; /* 64px * 1.25 */
    width: 80px;  /* 64px * 1.25 */
    background-image:url(http://icons.iconarchive.com/icons/cjdowner/cryptocurrency/64/ICON-icon.png);
    background-position: -0px -560px; /* -448px * 1.25 */
    border:10px solid gray;
    background-size:640px 640px; /* 512px * 1.25 */
}

#sprite2{
    height: 64px; 
    width: 64px;
    background-image:url(http://icons.iconarchive.com/icons/cjdowner/cryptocurrency/64/ICON-icon.png);
    background-position: -0px -48px;
    border:10px solid gray;sa
    transform:scale(1.25);s
    /* additional to compensate the position shift */
    /*position:relative;
    top:10px;
    left:10px;*/
}