CSS 스프라이트에서 이미지를 스케일링하려면 어떻게 해야 합니까?

programing

CSS 스프라이트에서 이미지를 스케일링하려면 어떻게 해야 합니까?

lastmoon 2023. 9. 9. 10:08

CSS 스프라이트에서 이미지를 스케일링하려면 어떻게 해야 합니까?

이 기사에서 http://css-tricks.com/css-sprites/, 은 하나의 큰 이미지에서 작은 이미지를 잘라내는 방법에 대해 설명합니다.가능한지 말씀해 주시겠어요?/작은 이미지를 잘라낸 다음 잘라낸 부분을 배열하기 전에 축소하는 방법을 알려주실 수 있나요?

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

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 옆에 있는 아이콘을 작게 할 수 있는지 알고 싶습니다.

2021 업데이트:배경 크기는 대부분의 주요 브라우저에서 지원하지만 모바일 브라우저가 지원하지 않으면 확대/축소를 사용합니다.

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

background-size : 150% 150%;

아니면

웹킷/블링크/이에 대한 줌과 변환의 조합을 사용할 수 있습니다: Mozilla(-moz-)에 대한 스케일과 크로스 브라우저 데스크톱 및 모바일에 대한 기존 오페라(-o-)

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

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

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

스프라이트를 사용할 때 스프라이트 안에 있는 이미지의 치수에 제한을 받습니다.background-sizeStephen이 언급한 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이 큰처럼,을 합니다.background-image.

시도해 보기:스트레치 Sprite - 크로스 브라우저, 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>

이건 제게 도움이 될 것 같네요.

그리드 가 에 ,background-size100% 스프라이트 수를 100%로 하고 100% 스프라이트 수를 하향으로 합니다.용을 합니다.background-position -<x*100>% -<y*100>% 스프라이트 x는 y반다서입니다입니다.

즉, 왼쪽에서 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%의이록가각에해로 a %의로%의 a %ertrh

즉, 이미지의 너비가 640px이고 이미지 내부의 스프라이트가 45px이면 45px가 640px가 됩니다.

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

그런 다음 오프셋을 설정해야 합니다.오프셋의 문제는 0%가 왼쪽으로 정렬되고 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 이미지입니다.

31x27y사이즈 45w32h로
500x370y사이즈 105w65h로

스프라이트 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>

제가 한 일은 이렇습니다.IE8 이하에서는 작동하지 않을 것임을 명심하세요.

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

이미지의 는 의 과 됩니다 는 됩니다 의 로 축소됩니다.#element키도 할 수 있어요 당신이 변환한다면 만약 똑같이 보다 축소하여 변환한다면 당신이 you , 만약 do the its , convert height 축소하여 can same with too you 보다 if 키도 , 똑같이 할 있어요 수 높이height◦ 유일하게까다로운 부분은 비율을 파악하는 것입니다 비율로 일정한 것입니다 for ages percent 파악하는 유일하게 are out tricky the bit figuring only 일정한 the 비율로 까다로운 비율을 부분은 bit arebackground-position.

첫 번째 백분율은 정상 폭에서 스프라이트의 전체 폭으로 나눈 후 100을 곱했을 때 스프라이트의 대상 영역의 폭입니다.

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

그 두 방정식의 문구가 조금 엉성하니, 제가 더 잘 설명할 필요가 있으면 말씀해 주세요.

오래된 게시물이지만, 여기 제가 사용한 것이 있습니다.background-size:cover;(Ceylan Pamir는 "Ceylan Pamir )

사용 예시
수평 원 뒤집기(앞쪽 이미지의 호버, 다른 이미지로 뒤로 뒤집음).

SPRITE 예

최종 크기
이미지 @ x 120px @ 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
사용된 크기에 따라 각 스프라이트의 코드를 다시 정의하지 않고 다양한 크기의 컨텐츠 선택기(:전/:후)에서 각 스프라이트의 각 용도를 확장하고자 합니다.

따라서 이 솔루션을 사용하면 동일한 스프라이트 코드를 사용할 수 있습니다.<button>로서<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 좌표로 지정할 수 있습니다.

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

사용하다transform: scale(...);일치 추가margin: -...px축척으로부터의 여유 공간을 보상합니다.(사용가능)* {outline: 1px solid}요소 경계를 확인합니다).

이미지를 확장하는 더 간단한 해결책을 찾은 것 같습니다. 예를 들어, 3개의 동일한 크기의 스프라이트가 있는 이미지가 있다고 가정해 보겠습니다. CSS를 사용하여 이미지를 확장합니다.

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에 처음이고, 스타일링은 제 최고의 분야가 아닙니다. 이것은 잘못된 방법일 수 있습니다.하지만 파이어폭스/크롬/익스플로러 10에서는 잘 작동했습니다. 이전 버전에서도 잘 작동했으면 좋겠습니다.

2018년 여기.배경 크기와 백분율을 사용합니다.

시트:

이것은 스프라이트의 한 줄을 가정한 것입니다.시트의 폭은 스프라이트 1개의 100 + 폭으로 균등하게 나눌 수 있는 숫자여야 합니다.108x108px인 스프라이트가 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);이 할 수 있습니다.8이 아닌 필요한 값으로

스프라이트 이미지의 포장지 요소에 너비와 높이를 설정합니다.이 CSS를 사용합니다.

{
    background-size: cover;
}

스프라이트 시트에 동일한 이미지의 복사본 두 개를 다른 스케일로 사용합니다.앱의 로직에 좌표와 크기를 설정합니다.

언급URL : https://stackoverflow.com/questions/2430206/how-can-i-scale-an-image-in-a-css-sprite

'programing' 카테고리의 다른 글

내 to Fixed() 기능이 작동하지 않는 이유는 무엇입니까? (0)	2023.09.14
NULL을 백엔드 또는 프론트엔드의 빈 문자열로 바꾸시겠습니까? (0)	2023.09.14
브라우저 개발 도구에서 ajax 호출이 동기식인지 비동기식인지 확인하려면 다음과 같이 하십시오. (0)	2023.09.09
페이지 로드 시 jQuery Fancybox를 시작하는 방법은? (0)	2023.09.09
VBA에서 감가상각되지 않는 방법으로 SQL Server에 액세스하는 방법은 무엇입니까? (0)	2023.09.09

현재글CSS 스프라이트에서 이미지를 스케일링하려면 어떻게 해야 합니까?

각종 프로그래밍 정보를 다루는 블로그입니다.

PowerShell, MariaDB, Android, ReactJS, jquery, asp.net, spring, WordPress, angularjs, json, spring-boot, Python, mongodb, Oracle, C, Excel, ajax, git, sql-server, CSS,

Today :
Yesterday :

lastmoon

CSS 스프라이트에서 이미지를 스케일링하려면 어떻게 해야 합니까?

CSS 스프라이트에서 이미지를 스케일링하려면 어떻게 해야 합니까?

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

CSS 스프라이트에서 이미지를 스케일링하려면 어떻게 해야 합니까?

CSS 스프라이트에서 이미지를 스케일링하려면 어떻게 해야 합니까?

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바