ฉันจะปรับขนาดภาพในสไปรต์ 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 หรือไม่?

คุณสามารถใช้ขนาดพื้นหลังได้ตามที่เบราว์เซอร์ส่วนใหญ่สนับสนุน (แต่ไม่ใช่http://caniuse.com/#search=background-sizeทั้งหมด)

background-size : 150% 150%;

หรือ

คุณสามารถใช้คอมโบซูมสำหรับ webkit / ie และtransform: scaleสำหรับ Firefox (-moz-) และ Opera (-o-) สำหรับ cross-browser desktop & mobile

[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) จะตัดภาพ 20x20px จากแท็กซึ่งทำหน้าที่เหมือนปรับขนาดimgbackground-image

ลองสิ่งนี้: Stretch Sprites - ข้ามเบราว์เซอร์ปรับขนาด / ขยายภาพ CSS sprite ที่ตอบสนองได้

เมธอดนี้ปรับขนาด sprite 'responsively' เพื่อปรับความกว้าง / ความสูงตามขนาดหน้าต่างเบราว์เซอร์ของคุณ มันไม่ได้ใช้ 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-sizeจำนวนสไปรต์เป็น 100% และจำนวนสไปรต์ลดลง 100% จากนั้นใช้background-position -<x*100>% -<y*100>%ตำแหน่งที่ x และ y เป็นศูนย์สไปรต์

กล่าวอีกนัยหนึ่งถ้าคุณต้องการเทพดาที่ 3 จากซ้ายและแถวที่ 2 นั่นคือ 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% ทั่วองค์ประกอบในคำอื่น ๆ ทั้งหมดออกทางด้านขวา แต่นั่นไม่ใช่สิ่งที่หมายถึง 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

นี่คือภาพขนาด 640x480 ที่มี 2 สไปรต์

1. ที่ 31x27y ขนาด 45w 32h
2. ที่ 500x 370y ขนาด 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;}

FIDDLE กรณีของ ABBREVIATED
http://jsfiddle.net/zuhloobie/133esq63/2/

ลองใช้ขนาดพื้นหลัง: http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm

มีบางอย่างที่จะหยุดคุณไม่ให้แสดงภาพในขนาดที่คุณต้องการตั้งแต่แรกไหม?

ฉันใช้เวลาสักครู่ในการสร้างวิธีแก้ไขปัญหานี้ฉันมีความสุขกับ:

ปัญหา:

• SVG เทพดาไอคอน - พูด 80px x 3200px

• เราต้องการปรับขนาดการใช้งานแต่ละรายการในตัวเลือกเนื้อหา (: ก่อน /: หลัง) ในสถานที่ต่าง ๆ ในหลาย ๆ ขนาดโดยไม่ต้องกำหนดพิกัดของสไปรท์แต่ละครั้งตามขนาดที่ใช้

ดังนั้นวิธีนี้ช่วยให้คุณใช้เดียวกันเทพดาร่วม ords ใน<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

ข้อเสียของวิธีการนี้คือการเพิ่มไอคอนเพิ่มเติมในภายหลังจะเปลี่ยนความสูงของสไปรต์และดังนั้น y-position% แต่ถ้าคุณไม่ทำเช่นนั้นพิกัดสไปรต์ของคุณจะต้องเปลี่ยนสำหรับความละเอียดที่ปรับขนาดแต่ละครั้งที่คุณต้องการ

ฉันคิดว่าพบวิธีแก้ปัญหาที่ง่ายกว่าสำหรับการปรับขนาดรูปภาพ: ตัวอย่าง - สมมติว่ามีภาพที่มีสไปรต์ขนาดเท่ากัน 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 และการจัดแต่งทรงผมไม่ใช่สิ่งที่ดีที่สุดของฉันนี่อาจเป็นวิธีที่ผิดในการทำ .. แต่มันใช้งานได้สำหรับฉันใน Firefox / Chrome / Explorer 10 หวังว่ามันจะทำงานในเวอร์ชั่นเก่าด้วยเช่นกัน

ใช้transform: scale(...);และเพิ่มการจับคู่margin: -...pxเพื่อชดเชยพื้นที่ว่างจากการปรับสเกล (คุณสามารถใช้* {outline: 1px solid}เพื่อดูขอบเขตองค์ประกอบ)

2561 ที่นี่ ใช้ขนาดพื้นหลังพร้อมเปอร์เซ็นต์

แผ่น:

นี่ถือว่าเป็นแถวเดียวของสไปรต์ ความกว้างของแผ่นของคุณควรจะเป็นหมายเลขที่ไม่เท่ากันหารด้วย 100 + ความกว้างของหนึ่งในผีสาง หากคุณมีสไปรต์ 30 รายการที่ 108x108 px ให้เพิ่มพื้นที่ว่างพิเศษที่ส่วนท้ายเพื่อสร้างความกว้างสุดท้ายที่ 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;
}

ง่าย ... การใช้ภาพเดียวกันสองชุดที่มีสเกลต่างกันบนแผ่นงานสไปรต์ ตั้งค่า Coords และขนาดบนตรรกะของแอป