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

이 기사 ( http://css-tricks.com/css-sprites/) 에서는 1 개의 큰 이미지에서 작은 이미지를 잘라낼 수있는 방법에 대해 설명합니다. 더 작은 이미지를 잘라낸 다음 잘라 내기 전에 잘라낸 영역의 크기를 조정할 수 있는지 여부를 알려 주시겠습니까?

그 기사의 예는 다음과 같습니다.

A
{
  background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/3deb155981/spriteme1.png);
  background-position: -10px -56px;
}

spriteme1.png에서 이미지를 자른 후 어떻게 이미지 크기를 조정할 수 있는지 알고 싶습니다.

다음은 예제 URL입니다. http://css-tricks.com/examples/CSS-Sprites/Example1After/

항목 1,2,3,4 옆의 아이콘을 작게 만들 수 있는지 알고 싶습니다.

대부분의 브라우저에서 지원 하는 background-size를 사용할 수 있습니다 (그러나 모든 http://caniuse.com/#search=background-size는 아님)

background-size : 150% 150%;

또는

webkit / ie 에 줌 의 콤보를 사용하고 브라우저 간 데스크탑 및 모바일에 Firefox (-moz-)의 경우 scale 및 Opera (-o-)의 변환 을 사용할 수 있습니다 .

[class^="icon-"]{
    display: inline-block;
    background: url('../img/icons/icons.png') no-repeat;
    width: 64px;
    height: 51px;
    overflow: hidden;
    zoom:0.5;
    -moz-transform:scale(0.5);
    -moz-transform-origin: 0 0;
}

.icon-huge{
    zoom:1;
    -moz-transform:scale(1);
    -moz-transform-origin: 0 0;
}

.icon-big{
    zoom:0.60;
    -moz-transform:scale(0.60);
    -moz-transform-origin: 0 0;
}

.icon-small{
    zoom:0.29;
    -moz-transform:scale(0.29);
    -moz-transform-origin: 0 0;
}

스프라이트를 사용하면 스프라이트의 이미지 크기로 제한됩니다. background-size스티븐 언급 CSS 속성은, 널리 아직 지원되지 않고, IE8 같은 아래 브라우저에 문제가 발생할 수 있습니다 - 그리고 시장 점유율 주어, 이것은 실행 가능한 옵션이 아니다.

이 문제를 해결하는 또 다른 방법은 두 요소를 사용하고 다음과 같이 img태그 와 함께 스프라이트를 스케일링하는 것입니다 .

<div class="sprite-image"
     style="width:20px; height:20px; overflow:hidden; position:relative">
    <!-- set width/height proportionally, to scale the sprite image -->
    <img src="sprite.png" alt="icon"
         width="20" height="80"
         style="position:absolute; top: -20px; left: 0;" />
</div>

이렇게하면 외부 요소 ( div.sprite-image)가 img태그 에서 20x20 픽셀 이미지를 자르고 크기 조정 된 것처럼 작동합니다 background-image.

이것을 시도하십시오 : Stretchy Sprites -CSS 스프라이트 이미지의 크로스 브라우저, 응답 크기 조정 / 스트레칭

이 방법은 스프라이트를 '응답 성있게'스케일링하여 너비 / 높이가 브라우저 창 크기에 따라 조정되도록합니다. 그것은 사용하지 않는 background-size 으로 지원 이전 버전의 브라우저에서 이것에 대한 것은 존재하지 않는다.

CSS

.stretchy {display:block; float:left; position:relative; overflow:hidden; max-width:160px;}
.stretchy .spacer {width: 100%; height: auto;}
.stretchy .sprite {position:absolute; top:0; left:0; max-width:none; max-height:100%;}
.stretchy .sprite.s2 {left:-100%;}
.stretchy .sprite.s3 {left:-200%;}

HTML

<a class="stretchy" href="#">
  <img class="spacer" alt="" src="spacer.png">
  <img class="sprite" alt="icon" src="sprite_800x160.jpg">
</a>
<a class="stretchy s2" href="#">
  <img class="spacer" alt="" src="spacer.png">
  <img class="sprite" alt="icon" src="sprite_800x160.jpg">
</a>
<a class="stretchy s3" href="#">
  <img class="spacer" alt="" src="spacer.png">
  <img class="sprite" alt="icon" src="sprite_800x160.jpg">
</a>

transform: scale(); 원래 요소의 크기를 유지합니다.

가장 좋은 옵션은을 사용하는 것 vw입니다. 그것은 매력처럼 작동합니다.

https://jsfiddle.net/tomekmularczyk/6ebv9Lxw/1/

#div1,
#div2,
#div3 {
  background:url('//www.google.pl/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png') no-repeat;
  background-size: 50vw;   
  border: 1px solid black;
  margin-bottom: 40px;
}

#div1 {
  background-position: 0 0;
  width: 12.5vw;
  height: 13vw;
}
#div2 {
  background-position: -13vw -4vw;
  width: 17.5vw;
  height: 9vw;
  transform: scale(1.8);
}
#div3 {
  background-position: -30.5vw 0;
  width: 19.5vw;
  height: 17vw;
}

<div id="div1">
  </div>
  <div id="div2">
  </div>
  <div id="div3">
  </div>

여기 내가 한 일이 있습니다. IE8 이하에서는 작동하지 않습니다.

#element {
  width:100%;
  height:50px;
  background:url(/path/to/image.png);
  background-position:140.112201963534% 973.333333333333%;
}

부모의 #element크기 가 줄어듦에 따라 배경 이미지의 너비가 줄어 듭니다. height백분율 로 변환하면 높이로도 동일한 작업을 수행 할 수 있습니다 . 까다로운 부분은에 대한 백분율을 파악하는 것입니다 background-position.

첫 번째 백분율은 일반 너비에서 스프라이트의 총 너비로 나눈 값에 100을 곱한 경우 스프라이트의 대상 영역의 너비입니다.

두 번째 백분율은 스프라이트의 전체 높이로 나눈 값을 100으로 곱한 전 스프라이트의 대상 영역의 높이입니다.

이 두 방정식에 대한 표현은 약간 어색하기 때문에 더 잘 설명해야하는지 알려주십시오.

이것은 나를 위해 작동하는 것 같습니다.

스프라이트가 그리드에 있으면 background-size100 % 스프라이트 수와 100 % 스프라이트 수로 설정하십시오 . 그런 다음 background-position -<x*100>% -<y*100>%x와 y는 0 기반 스프라이트입니다.

다시 말해 왼쪽과 두 번째 행에서 3 번째 스프라이트를 원하면 2가 1이됩니다.

background-position: -200% -100%;

예를 들어 여기 스프라이트 시트 4x2 스프라이트가 있습니다

그리고 여기 예가 있습니다

div {
  margin: 3px;
  display: inline-block;
}
.sprite {
  background-image: url('https://i.stack.imgur.com/AEYNC.png');
  background-size: 400% 200%;  /* 4x2 sprites so 400% 200% */
}
.s0x0 { background-position:    -0%   -0%; }
.s1x0 { background-position:  -100%   -0%; }
.s2x0 { background-position:  -200%   -0%; }
.s3x0 { background-position:  -300%   -0%; }
.s0x1 { background-position:    -0%  -100%; }
.s1x1 { background-position:  -100%  -100%; }
.s2x1 { background-position:  -200%  -100%; }
.s3x1 { background-position:  -300%  -100%; }

<div class="sprite s3x1" style="width: 45px; height:20px"></div>
<div class="sprite s3x1" style="width: 128px; height:30px"></div>
<div class="sprite s3x1" style="width: 64px; height:56px"></div>
<div class="sprite s2x1" style="width: 57px; height:60px"></div>
<div class="sprite s3x0" style="width: 45px; height:45px"></div>
<div class="sprite s0x1" style="width: 12px; height:100px"></div>

<br/>
<div class="sprite s0x0" style="width: 45px; height:20px"></div>
<div class="sprite s1x0" style="width: 128px; height:45px"></div>
<div class="sprite s2x0" style="width: 64px; height:56px"></div>
<div class="sprite s3x0" style="width: 57px; height:60px"></div>
<br/>
<div class="sprite s0x1" style="width: 45px; height:45px"></div>
<div class="sprite s1x1" style="width: 12px; height:50px"></div>
<div class="sprite s2x1" style="width: 12px; height:50px"></div>
<div class="sprite s3x1" style="width: 12px; height:50px"></div>

스프라이트의 크기가 다른 경우 background-size스프라이트의 너비가 100 %가되도록 각 스프라이트의 백분율을 백분율 로 설정해야합니다.

즉, 이미지가 640px 너비이고 해당 이미지 내부의 스프라이트가 45px 너비 인 경우 45px를 640px로 만듭니다.

xScale = imageWidth / spriteWidth
xScale = 640 / 45
xScale = 14.2222222222
xPercent = xScale * 100
xPercent = 1422.22222222%

그런 다음 오프셋을 설정해야합니다. 오프셋의 합병증은 0 %가 왼쪽으로 정렬되고 100 %가 오른쪽으로 정렬된다는 것입니다.

그래픽 프로그래머로서, 요소 전체에서 배경을 100 %, 즉 오른쪽에서 완전히 벗어나게하려면 100 % 오프셋이 예상됩니다 backgrouhnd-position. background-position: 100%;오른쪽 정렬을 의미합니다. 스케일링 후이를 고려한 포럼은

xOffsetScale = 1 + 1 / (xScale - 1)              
xOffset = offsetX * offsetScale / imageWidth

오프셋이 31px라고 가정

xOffsetScale = 1 + 1 / (14.222222222 - 1)
xOffsetScale = 1.0756302521021115
xOffset = offsetX * xOffsetScale / imageWidth
xOffset = 31 * 1.0756302521021115 / 640
xOffset = 0.05210084033619603
xOffsetPercent = 5.210084033619603

스프라이트가 2 개인 640x480 이미지입니다.

1. 31x 27y 크기 45w 32 시간
2. 500x370y 크기 105w 65h에서

스프라이트에 대한 위의 수학에 따라 1

xScale = imageWidth / spriteWidth
xScale = 640 / 45
xScale = 14.2222222222
xPercent = xScale * 100
xPercent = 1422.22222222%

xOffsetScale = 1 + 1 / (14.222222222 - 1)
xOffsetScale = 1.0756302521021115
xOffset = offsetX * xOffsetScale / imageWidth
xOffset = 31 * 1.0756302521021115 / 640
xOffset = 0.05210084033619603
xOffsetPercent = 5.210084033619603

yScale = imageHeight / spriteHEight
yScale = 480 / 32
yScale = 15
yPercent = yScale * 100
yPercent = 1500%

yOffsetScale = 1 + 1 / (15 - 1)
yOffsetScale = 1.0714285714285714
yOffset = offsetY * yOffsetScale / imageHeight
yOffset = 27 * 1.0714285714285714 / 480
yOffset = 0.06026785714285714
yOffsetPercent = 6.026785714285714

div {
  margin: 3px;
  display: inline-block;
}
.sprite {
  background-image: url('https://i.stack.imgur.com/mv9lJ.png');
}
.s1 {
  background-size:      1422.2222% 1500%;
  background-position:  5.210084033619603% 6.026785714285714%;
}
.s2 {
  background-size:      609.5238095238095% 738.4615384615385%;
  background-position:  93.45794392523367% 89.1566265060241%;
}

<div class="sprite s1" style="width: 45px; height:20px"></div>
<div class="sprite s1" style="width: 128px; height:30px"></div>
<div class="sprite s1" style="width: 64px; height:56px"></div>
<div class="sprite s1" style="width: 57px; height:60px"></div>
<div class="sprite s1" style="width: 45px; height:45px"></div>
<div class="sprite s1" style="width: 12px; height:50px"></div>
<div class="sprite s1" style="width: 50px; height:40px"></div>
<hr/>
<div class="sprite s2" style="width: 45px; height:20px"></div>
<div class="sprite s2" style="width: 128px; height:30px"></div>
<div class="sprite s2" style="width: 64px; height:56px"></div>
<div class="sprite s2" style="width: 57px; height:60px"></div>
<div class="sprite s2" style="width: 45px; height:45px"></div>
<div class="sprite s2" style="width: 12px; height:50px"></div>
<div class="sprite s2" style="width: 50px; height:40px"></div>

이전 게시물이지만 다음과 같이 사용했습니다 background-size:cover;(@Ceylan Pamir의 팁).

사용 예
수평 원 플리퍼 (전면 이미지 위에 마우스를 대면 다른 이미지로 뒤집습니다).

예제 스프라이트
480px x 240px

예 최종 크기
단일 이미지 @ 120px x 120px

일반 코드
.front {width:120px; height:120px; background:url(http://www.example.com/images/image_240x240.png); background-size:cover; background-repeat:no-repeat; background-position:0px 0px;}

.back {width:120px; height:120px; background:url(http://www.example.com/images/image_240x240.png); background-size:cover; background-repeat:no-repeat; background-position:-120px 0px;}

약식 케이스 피들
http://jsfiddle.net/zuhloobie/133esq63/2/

배경 크기를 사용해보십시오 : http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm

처음에 원하는 크기로 이미지를 렌더링하지 못하게하는 것이 있습니까?

이 문제에 대한 해결책을 만드는 데 시간이 걸렸습니다.

문제:

• 아이콘의 SVG 스프라이트-80px x 3200px

• 우리는 사용 된 크기에 따라 각 스프라이트의 좌표를 재정의하지 않고 다양한 크기의 다양한 장소에서 컨텐츠 선택기 (: before / : after)에서 각 용도를 확장하려고합니다.

이 솔루션을 사용하면 동일한 스프라이트 공동 ords를 사용할 수 있습니다 그래서 <button>A와 <menuitem>여전히 스케일링 동안.

[data-command]::before {
    content: '';
    position: absolute;
    background-image: url("images/sprite.svgz");
    background-repeat: no-repeat;
    background-size: cover;
}

button[data-command]::before {
  width: 32px;
  height: 32px;
}

menuitem[data-command]::before {
  width: 24px;
  height: 24px;
}

[data-command="cancel"]::before {
  background-position: 0% 35%;
}

[data-command="logoff"]::before {
  background-position: 0% 37.5%;
}

여기에서 다른 사람들이 제안한대로 배경 크기가 아닌 배경 위치에 백분율 (소수점 2 자리)을 사용하면 같은 아이콘 선언을 다시 선언하지 않고도 모든 크기로 조정할 수 있습니다.

위치 y 비율은 원래 스프라이트 높이 / 아이콘 높이 (%)입니다. 여기에서 80px * 100 / 3200px == 각 스프라이트는 y 위치 2.5 %로 표시됩니다.

호버 / 마우스 오버 상태 인 경우 스프라이트 너비를 두 배로 늘리고 위치 x 좌표로 지정할 수 있습니다.

이 방법의 단점은 나중에 더 많은 아이콘을 추가하면 스프라이트 높이와 y 위치 %가 변경되지만, 그렇게하지 않으면 스프라이트 좌표가 필요한 각 스케일 해상도마다 변경되어야한다는 것입니다.

글쎄, 이미지 스케일링을위한 더 간단한 해결책을 찾았습니다.

background-size : 300% 100%;

그런 다음 html 요소에 적용해야 할 맞춤 높이와 너비를 지정하십시오.

 width :45%;
 height:100px;

샘플 코드는 다음과 같습니다.

.customclass {
    background: url("/sample/whatever.png") 0 0 no-repeat ;
    background-size : 300% 100%;
    width :45%;
    height:100px;
}

나는 CSS에 익숙하지 않고 스타일링은 내 최선의 영역이 아니며 이것이 잘못된 방법 일 수 있습니다 ..하지만 Firefox / Chrome / Explorer 10에서 저에게 효과적이었습니다. 이전 버전에서도 작동합니다 ..

사용 transform: scale(...);및 추가 매칭은 margin: -...px스케일링 여유 공간을 보상합니다. ( * {outline: 1px solid}요소 경계를 보는 데 사용할 수 있습니다 ).

2018 년 여기. 백분율로 배경 크기를 사용하십시오.

시트:

이것은 단일 행의 스프라이트를 가정합니다. 시트의 너비는 하나의 스프라이트의 100 + 너비로 균등하게 나눌 수있는 숫자 여야 합니다 . 108x108 픽셀 인 30 개의 스프라이트가있는 경우 끝에 빈 공간을 추가하여 최종 너비를 5508px (50 * 108 + 108)로 만듭니다.

CSS :

.icon{
    height: 30px;  /* Set this to anything. It will scale. */
    width: 30px; /* Match height. This assumes square sprites. */
    background:url(<mysheeturl>);
    background-size: 5100% 100%; /*  5100% because 51 sprites. */
}

/* Each image increases by 2% because we used 50+1 sprites. 
   If we had used 20+1 sprites then % increase would be 5%. */

.first_image{
    background-position: 0% 0;
}

.ninth_image{
    background-position: 16% 0; /* (9-1) x 2 = 16 */
}

HTML :

<div class ="icon first_image"></div>
<div class ="icon ninth_image"></div>

transform: scale(0.8);0.8 대신 필요한 값으로 사용

스프라이트 이미지의 래퍼 요소에 너비와 높이를 설정하십시오. 이 CSS를 사용하십시오.

{
    background-size: cover;
}

쉬움 ... 스프라이트 시트에서 서로 다른 스케일로 동일한 이미지의 두 복사본을 사용합니다. 앱의 논리에서 좌표와 크기를 설정하십시오.