이미지 스프라이트에서 부분 배경 이미지를 집어 넣는 방법

Question

나는 이미지 스프라이트에서 단일 국가 플래그를 생성하는이 바이올린을 가지고 있습니다. 깃발 너비가 너무 넓기 때문에 각 깃발을 쥐어 짜고 싶습니다. 예를 들어

JSFiddle Demo

는 노르웨이 플래그는 jsfiddle 샘플에서 너무 넓습니다.

어떻게하면됩니까? 고맙습니다.

#flag1 { 
    width: 120px; 
    height: 60px; 
    background-image: url(http://i.hizliresim.com/e7Y5dm.png); 
    background-position: -120px 0; 
} 

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

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

Answer 1

한 용액 scale (transform:scale(x);)에 전체 소자 (이때에서 div) 실시 예 transform:scale(0.5); 들어
절반 크기의 소자를 조절하지만, 그것은의 초기 공간을 유지하는 것이 유념 것이다 DOM 흐름.

---

데모 또한 http://jsfiddle.net/JA97b/5/

---

에 ..

---

또 다른 방법은 이미지 크기를 조정 background-size property을 사용하는 것입니다,하지만 당신은뿐만 아니라 위치를 다시 계산해야합니다, 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> 

Answer 2

는 당신은 내가 당신의 스프라이트의 폭을 줄이기 위해 배경 크기를 사용하여 원하는 정확히 무엇을 얻기 위해 사용합니다. 그래서 스프라이트의 너비를 1/6로 줄이고 요소의 너비에 맞춰 조정했습니다.

#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; 
} 

Demo