스프라이트에서 이미지 크기를 조절하는 방법

Question

모든 32 x 32 이미지의 스프라이트가 있고 프로젝트에서 사용하지만 일부 장소에서는 32 x 32 대신 64 x 50이 필요합니다. 이제 CSS를 사용하여 어떻게 할 수 있습니까? 그것을 할 방법이 있습니까?

도움을 주시면 감사하겠습니다. 감사.

Answer 1

당신은 실제로 스프라이트 안에 이미지를 확장 할 수 transform: scale() 속성을 사용할 수 있습니다

또는 새 zoom css 속성을 사용할 수 있습니다.

예 : 이미지가 32x32이고 크기를 64x64라고 말하면됩니다. 2로 간단한 곱하기로 트릭을해야합니다. 다음과 같이 그래서, 당신은 뭔가를 사용합니다 :

transform: scale(2.0);// multiplies both coordinates and you will get your scaled image of 64 x 64.

또는 당신이 원하는대로 당신은 단순히 귀하의 경우, 지금

zoom: 2;을 수행 할 수 있습니다에 X 축 다른 방법과 다른 방법으로 Y 축 의미에서 x는 너비이고 y는 높이입니다. 당신은 다음과 같이 할 수있는 :

transform: scaleX(2.0); 
transform: scaleY(1.5625); 

정말 이상한하지만 규모가 모든 브라우저에서 지원됩니다

그리고 한 가지 더, 줌 속성이 아직 파이어 폭스를 지원하지 않습니다 :) 트릭을 할해야

.

지원 : Scale

CSS Zoom
그것이 당신을 도움이되기를 바랍니다.

Answer 2

background-position과 background-size 속성을 조합하여 사용할 수 있습니다. 이 예에서

은 (신장) 원본 이미지가 100X100과 100X75를 배경으로 설정 50 × 50,된다

#a1 { 
 
    background: url(https://dummyimage.com/50x50/000/fff); 
 
    width: 100px; 
 
    height: 100px; 
 
    background-position: 0 0; 
 
    background-repeat: no-repeat; 
 
    border: 1px solid red; 
 
    background-size: 100px 100px; 
 
} 
 
#a2 { 
 
    background: url(https://dummyimage.com/50x50/000/fff); 
 
    width: 100px; 
 
    height: 75px; 
 
    background-position: 0 0; 
 
    background-repeat: no-repeat; 
 
    border: 1px solid red; 
 
    background-size: 100px 75px; 
 
}

<div id="a1"></div> 
 
<br /> 
 
<div id="a2"></div>