너비가 % 인 div의 CSS 스프라이트?

Question

Css 스프라이트의 이미지를 div에 넣고 width을 %로 사용할 수 있습니까?

.sprite-gloss-vulc { 
    background-image: url("/images/sprite-img.png"); 
} 

.sprite-gloss-vulc-anello { 
    background-position: -1px -0px; 
    width: 120px; 
    height: 120px; 
} 

#flex { 
width: 17%; 
} 

img { 
    width: 120px; 
    height: 120px; 
} 


<div id="flex"> 
    <img src="/images/transparent.gif" class="sprite-gloss-vulc sprite-gloss-vulc-anello"> 
</div> 

DIV 부모의 폭이 120 픽셀 (폭 img) 작동보다 큰,하지만 난이 CSS 스프라이트는 페이지의 크기를 조정하는 경우 "컷"

:

지금 나는이 아니라 작품을 시도했다. div의 뉴스 너비가 작기 때문에 자르지 만 크기는 .sprite-gloss-vulc-anello이며 여전히 동일합니다.

당신이 내 영어를 용서해 주시고 저를 도울 수 있기를 바랍니다 .... 고마워요!

Answer 1

불행히도 비율로 스프라이트 이미지를 사용할 수 없습니다.

sprite-gloss-vulc-anello 또는 img 태그에 최대 너비 속성을 추가 할 수 있지만 작동하지 않습니다.

부모 div를 기반으로 이미지의 크기를 동적으로 조정하려면 별도의 이미지 파일로 사용해야합니다.

Answer 2

당신은 img 태그와 클래스에 두 번 높이의 폭을주고있다

.sprite-gloss-vulc { 
    background-image: url("/images/sprite-img.png"); 
} 

.sprite-gloss-vulc-anello { 
    background-position: -1px -0px; 
    width: 100%; 
    height: 100%; 
} 

#flex { 
width: 100%; 
} 

[응답 스프라이트/백분율 (의