Wie kann ich ein Bild in einem CSS-Sprite skalieren?

In diesem Artikel, http://css-tricks.com/css-sprites/ , wird erläutert , wie ich ein kleineres Bild von einem größeren Bild abschneiden kann. Können Sie mir bitte sagen, ob es möglich ist / wie ich ein kleineres Bild zuschneiden und dann den abgeschnittenen Bereich skalieren kann, bevor ich es auslege?

Hier ist ein Beispiel aus diesem Artikel:

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

Ich würde gerne wissen, wie ich dieses Bild skalieren kann, nachdem ich es von spriteme1.png aus zugeschnitten habe

Hier ist die URL des Beispiels: http://css-tricks.com/examples/CSS-Sprites/Example1After/

Ich würde gerne wissen, ob ich die Symbole neben Punkt 1,2,3,4 verkleinern kann.

Sie können die Hintergrundgröße verwenden , da diese von den meisten Browsern unterstützt wird (jedoch nicht von allen http://caniuse.com/#search=background-size ).

background-size : 150% 150%;

Oder

Sie können eine Kombination aus Zoom für Webkit / dh und Transformation verwenden: Skalieren für Firefox (-moz-) und Opera (-o-) für browserübergreifende Desktops und Mobilgeräte

[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;
}

Wenn Sie Sprites verwenden, sind Sie auf die Abmessungen des Bilds im Sprite beschränkt. Die background-sizevon Stephen erwähnte CSS-Eigenschaft wird noch nicht allgemein unterstützt und kann bei Browsern wie IE8 und darunter zu Problemen führen. Aufgrund ihres Marktanteils ist dies keine praktikable Option.

Eine andere Möglichkeit, das Problem zu lösen, besteht darin, zwei Elemente zu verwenden und das Sprite mithilfe eines imgTags wie folgt zu skalieren :

<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>

Auf diese Weise div.sprite-imageschneidet das äußere Element ( ) ein 20 x 20 Pixel großes Bild aus dem imgTag ab, das sich wie ein skaliertes Bild verhält background-image.

Versuchen Sie Folgendes : Stretchy Sprites - Browserübergreifende, reaktionsschnelle Größenänderung / Dehnung von CSS-Sprite-Bildern

Diese Methode skaliert Sprites "reaktionsschnell", sodass die Breite / Höhe entsprechend der Größe Ihres Browserfensters angepasst wird. Es verwendet nicht background-size als Unterstützung für diese in älteren Browsern ist nicht existent.

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(); Das ursprüngliche Element behält seine Größe bei.

Ich fand die beste Option zu verwenden vw. Es funktioniert wie ein Zauber:

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>

Hier ist, was ich getan habe, um dies zu tun. Denken Sie daran, dass es unter IE8 und darunter nicht funktioniert.

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

Die Breite des Hintergrundbilds wird als übergeordnetes #elementElement verkleinert. Dasselbe können Sie auch mit der Höhe tun, wenn Sie heightin einen Prozentsatz umrechnen . Das einzig schwierige ist, die Prozentsätze für herauszufinden background-position.

Der erste Prozentsatz ist die Breite des Zielbereichs des Sprites bei normaler Breite geteilt durch die Gesamtbreite des Sprites und multipliziert mit 100.

Der zweite Prozentsatz ist die Höhe des Zielbereichs des Sprites vor der Skalierung geteilt durch die Gesamthöhe des Sprites und multipliziert mit 100.

Der Wortlaut dieser beiden Gleichungen ist etwas schlampig. Lassen Sie mich wissen, wenn ich es besser erklären muss.

Das scheint bei mir zu funktionieren.

Wenn sich die Sprites im Raster befinden, setzen Sie die background-sizeAnzahl der Sprites auf 100% und die Anzahl der Sprites auf 100%. Verwenden Sie dann, background-position -<x*100>% -<y*100>%wobei x und y das auf Null basierende Sprite sind

Mit anderen Worten, wenn Sie das 3. Sprite aus der linken und 2. Reihe wollen, ist das 2 vorbei und 1 runter

background-position: -200% -100%;

Zum Beispiel ist hier ein Sprite Sheet 4x2 Sprites

Und hier ist ein Beispiel

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>

Wenn die Sprites unterschiedliche Größen haben, müssen Sie die background-sizefür jedes Sprite auf a Prozent einstellen , sodass die Breite des Sprites 100% beträgt

Mit anderen Worten, wenn das Bild 640 Pixel breit ist und das Sprite in diesem Bild 45 Pixel breit ist, müssen diese 45 Pixel 640 Pixel groß sein

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

Dann müssen Sie den Offset einstellen. Die Komplikation des Versatzes besteht darin, dass 0% links und 100% rechts ausgerichtet sind.

Als Grafikprogrammierer würde ich erwarten, dass ein Versatz von 100% den Hintergrund 100% über das Element bewegt, mit anderen Worten völlig von der rechten Seite, aber das bedeutet nicht, dass 100% bei Verwendung mit verwendet werden backgrouhnd-position. background-position: 100%;bedeutet rechts ausgerichtet. Das Forum, um dies nach der Skalierung zu berücksichtigen, ist also

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

Angenommen, der Versatz beträgt 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

Hier ist ein 640x480-Bild mit 2 Sprites.

1. bei 31x 27y Größe 45w 32h
2. bei 500x 370y Größe 105w 65h

Befolgen Sie die obigen Berechnungen für Sprite 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>

Alter Beitrag, aber hier ist, was ich verwendet habe background-size:cover;(Hutspitze an @Ceylan Pamir) ...

BEISPIEL VERWENDUNG
Horizontaler Kreisflipper ( Bewegen Sie den Mauszeiger über das Bild auf der Vorderseite, klappt mit einem anderen Bild nach hinten).

BEISPIEL
SPRITE 480px x 240px

BEISPIEL Endgröße
Einzelbild @ 120px x 120px

ALLGEMEINER CODE
.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;}

ABKÜRZTE FALLDECKEL
http://jsfiddle.net/zuhloobie/133esq63/2/

Versuchen Sie es mit der Hintergrundgröße: http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm

Gibt es etwas, das Sie davon abhält, die Bilder in der gewünschten Größe zu rendern?

Ich habe eine Weile gebraucht, um eine Lösung für dieses Problem zu finden, mit dem ich zufrieden war:

Problem:

• Ein SVG-Sprite von Symbolen - beispielsweise 80 x 3200 Pixel

• Wir möchten jede Verwendung in Inhaltsselektoren (: vor /: nach) an verschiedenen Stellen über verschiedene Größen skalieren, ohne die Koordinaten jedes Sprites basierend auf der verwendeten Größe neu zu definieren.

Mit dieser Lösung können Sie also dieselben Sprite-Koordinaten in <button>einer Zeit verwenden, <menuitem>während Sie sie noch skalieren.

[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%;
}

Durch die Verwendung von Prozentsätzen (auf 2 Dezimalstellen) in der Hintergrundposition anstelle der Hintergrundgröße, wie von anderen hier vorgeschlagen, können Sie dieselbe Symboldeklaration auf eine beliebige Größe skalieren, ohne sie erneut deklarieren zu müssen.

Der Prozentsatz für Position-y ist die ursprüngliche Sprite-Höhe / Symbolhöhe in% - in unserem Fall hier 80px * 100 / 3200px == Jedes Sprite wird durch eine y-Position von 2,5% dargestellt.

Wenn Sie Hover- / Mouseover-Zustände haben, können Sie die Breite des Sprites verdoppeln und in der Position-x-Koordinate angeben.

Der Nachteil dieses Ansatzes besteht darin, dass durch Hinzufügen weiterer Symbole zu einem späteren Zeitpunkt die Sprite-Höhe und damit die y-Position% geändert wird. Wenn Sie dies jedoch nicht tun, müssen Ihre Sprite-Koordinaten für jede benötigte skalierte Auflösung geändert werden.

Ich denke, wir haben eine einfachere Lösung für die Skalierung von Bildern gefunden: Beispiel - Nehmen wir an, es gibt ein Bild mit 3 gleich großen Sprites, die Sie verwenden möchten. Verwenden Sie CSS, um das Bild zu skalieren

background-size : 300% 100%;

Geben Sie dann die benutzerdefinierte Höhe und Breite an, die auf Ihr HTML-Element angewendet werden muss, z.

 width :45%;
 height:100px;

Ein Beispielcode würde ungefähr so ​​aussehen:

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

Ich bin ziemlich neu in CSS und Styling ist nicht mein bester Bereich. Dies könnte ein falscher Weg sein. Aber es hat bei mir in Firefox / Chrome / Explorer 10 funktioniert. Ich hoffe, es funktioniert auch in älteren Versionen.

Verwenden transform: scale(...);und fügen Sie Matching hinzu margin: -...px, um den freien Speicherplatz für die Skalierung zu kompensieren. (Sie können verwenden * {outline: 1px solid}, um Elementgrenzen zu sehen).

2018 hier. Verwenden Sie die Hintergrundgröße mit Prozentsatz.

BLATT:

Dies setzt eine einzelne Reihe von Sprites voraus. Die Breite Ihres Blattes sollte eine Zahl sein, die gleichmäßig durch 100 + Breite eines Sprites teilbar ist . Wenn Sie 30 Sprites mit einer Größe von 108 x 108 Pixel haben, fügen Sie am Ende einen zusätzlichen Leerraum hinzu, um die endgültige Breite 5508 Pixel (50 * 108 + 108) zu erhalten.

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>

Verwenden Sie transform: scale(0.8);mit dem Wert, den Sie anstelle von 0,8 benötigen

Stellen Sie die Breite und Höhe auf das Wrapper-Element des Sprite-Bildes ein. Verwenden Sie dieses CSS.

{
    background-size: cover;
}

Einfach ... Verwenden Sie zwei Kopien desselben Bildes mit unterschiedlichem Maßstab auf dem Sprite-Blatt. Stellen Sie die Koordinaten und die Größe in der Logik der App ein.