Css 如何从图像精灵中挤出部分背景图像

我有一把小提琴，它从一个图像精灵中生成单一的国旗。我想挤压每一面旗帜，因为旗帜的宽度似乎太宽了

例如，在JSFIDLE示例中，挪威国旗太宽

我该怎么做？多谢各位

#flag1{
宽度：120px；
高度：60px；
背景图片：url(http://i.hizliresim.com/e7Y5dm.png);
背景位置：-120px 0；
}
#旗子2{
宽度：120px；
高度：60px；
背景图片：url(http://i.hizliresim.com/e7Y5dm.png);
背景位置：-480px 13800px；
}
#旗子3{
宽度：120px；
高度：60px；
背景图片：url(http://i.hizliresim.com/e7Y5dm.png);
背景位置：-1200px 19020px；
}

一种解决方案是对整个元素（本例中为

div）

例如
transform:scale（0.5）
会将元素缩放到其大小的一半，但请记住，它会在DOM流中保留初始空间


另一种方法是使用调整图像大小，但也必须重新计算定位


演示


此外，在CSS中，您应该将公共属性分组到单个类，并应用该类，而不是对每个标志重复tem

.flag{
    width: 120px;
    height: 60px;
    background-image: url(http://i.hizliresim.com/e7Y5dm.png);
}
#flag1{background-position: -120px 0;}
#flag2{background-position: -480px 13800px;}
#flag3{background-position: -1200px 19020px;}

和使用

<div class="flag" id="flag1"></div>
<div class="flag" id="flag2"></div>
<div class="flag" id="flag3"></div>

为了得到你想要的东西，我使用了背景大小来缩小精灵的宽度。
所以我把精灵的宽度缩小了六分之一，并根据需要调整了元素的宽度

#flag3
{
    width: 100px;
    height: 60px;
    background: url(http://i.hizliresim.com/e7Y5dm.png) 0 0 no-repeat;
    background-position: -1000px -480px;
    background-size: 1500px 780px;
}