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

157

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.

Michael
quelle
Wie Stephen Sie fragte, hindert Sie etwas daran, die Bilder in der gewünschten Größe zu rendern?
Paul D. Waite
4
Ich bin auf dieser Seite gelandet, weil ich nach einer Antwort für dasselbe gesucht habe. In der heutigen Welt mit hochauflösenden Retina-Displays ist es üblich, ein Bild zu erstellen, das doppelt so groß ist wie es sein muss, und dann Höhen- / Breitenwerte in <img> -Attributen oder CSS-Stilen zu verwenden, um es beim Anzeigen auf die Hälfte der Höhe / Breite zu reduzieren. Dies sorgt für eine gestochen scharfe Anzeige auf Smartphones und Tablets. PNG-Sprites eignen sich jedoch hervorragend zum schnellen Zwischenspeichern und Rendern. Verwenden Sie am besten nicht nur ein Sprite aus 2x Bildern, sondern skalieren Sie es dann auf eine Größe, die es auch scharf aussehen lässt.
Art Geigel
Da die ursprüngliche Frage nie akzeptiert wurde und es eine ziemlich ordentliche und abwärtskompatible Lösung gibt, habe ich eine neue Codepen Stretchy- Version erstellt, da die ursprüngliche Website nicht mehr online ist und es möglicherweise noch einige Leute gibt, die eine Rückwärtsversion benötigen kompatible Lösung. Ich habe den Stift mit Zuschreibung des Originalwerks / Autors gemacht.
Alle Bits sind gleich

Antworten:

131

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;
}
aWebDeveloper
quelle
3
Funktioniert hervorragend in Chrome, funktioniert einwandfrei in FF, IE9 / 10. Erzeugt größtenteils den gewünschten Effekt.
RCNeil
Verwenden der (Beispiel-) Hintergrundgröße: 15%; funktioniert perfekt für Sprites unter Beibehaltung des richtigen Seitenverhältnisses. Es ist eine einfache Lösung für die Verwendung mit Haltepunkten auf reaktionsfähigen Websites.
C13L0
1
Die Eigenschaft für die Hintergrundgröße funktionierte bei meinem SVG-Sprite mit fester Höhe und Breite nicht, jedoch hat die Skalierung den Trick getan.
Andre
Verwenden Sie zum Hinzufügen von Unterstützung für IE8 das Attribut -ms-zoom als Synonym für Zoom im IE8-Standardmodus. -ms-Zoom: 0,7; Siehe den Link unten für weitere Details: msdn.microsoft.com/en-us/library/ms531189(v=vs.85).aspx
Amr
2
Update 2017: Die Hintergrundgröße wird von allen gängigen Browsern unterstützt, einschließlich IE9 +. caniuse.com/#search=background-size
Nathan Hinchey
29

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.

Alex Gyoshev
quelle
2
Wie Cletus und Quentin Statet hier ist dies möglicherweise nicht der beste Ansatz. Für mich ist es ein Dealbreaker - ich muss srcper CSS zuweisen .
Jook
-1: Sie können Präsentationselemente nicht mit Inhalten / Daten mischen. <img>sollte nur verwendet werden, wenn es Teil des Inhalts ist. Für Designzwecke sind Hintergrundbilder ein Muss.
Shahriyar Imanov
Beste Antwort (a) funktioniert universell, (b) ist für den Menschen verständlich, (c) ist kurz, ... (z) trennt Präsentation von Inhalt.
Bob Stein
18

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>
tobyj
quelle
3
Der Link erklärt die Theorie hier nicht wirklich. Sie verwenden ein Div mit Überlauf: Wird als Zuschneidebereich / Fenster über der Verwendung einer skalierten Version des Sprite-Bilds ausgeblendet. Aus diesem Grund wird überhaupt kein Hintergrundbild verwendet. Nur eine Schicht über der anderen als Maske.
Simon
1
Muss Spacer ein Bild sein oder kann stattdessen ein einfaches Div verwendet werden?
Isapir
4
Hier ist ein CodePen- Beispiel dafür. Es scheint nur für horizontale oder vertikale Sprites zu funktionieren. Keine Gitter.
Wernight
Ich habe eine neue Codepen Stretchy- Version erstellt, da die ursprüngliche Website nicht mehr online ist und es möglicherweise noch einige Leute gibt, die eine abwärtskompatible Lösung benötigen. Ich habe den Stift mit Zuschreibung des Originalwerks / Autors gemacht
All Bits Equal
10

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>

Tomasz Mularczyk
quelle
Hallo, das beantwortet die Frage nicht. Sie sollten die drei Divs mit unterschiedlichen Maßstäben desselben Bildes anzeigen. In wenigen Worten sollte es unterschiedliche Größen der "Schriftart" zeigen. Kannst du das Reparieren?
Robert
Hallo @ Robert. Wie wäre es jetzt?
Tomasz Mularczyk
PS Haben Sie Verhaltensweisen mit der VW-Maßeinheit bemerkt?
Robert
Ich bin mir nicht sicher, welche Verhaltensweisen meinst du?
Tomasz Mularczyk
VW VH skalieren proportional zur Größe des Ansichtsfensters. Ich habe sie bis jetzt noch nie benutzt. Es ist nur eine Neugier auf Ihre Erfahrung mit ihnen. Sind sie so "magisch" oder gibt es in einigen Situationen, die Sie vielleicht bemerkt haben, Probleme (unerwartete Verhaltensweisen) zu berücksichtigen? Vielen Dank
Robert
7

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.


quelle
6

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

Geben Sie hier die Bildbeschreibung ein

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.

Geben Sie hier die Bildbeschreibung ein

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

Geben Sie hier die Bildbeschreibung ein

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>

gman
quelle
Wie haben Sie die Werte für offsetX und offsetY berechnet?
TryHarder
5

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/

chris
quelle
4

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?

stephenmurdoch
quelle
Kann ich JavaScript und CSS in Kombination verwenden, um dies zu lösen? Ich habe die Hintergrundgröße ausprobiert. Eigentum. Ich kann es nicht zum Laufen bringen. Das Bild wird aus irgendeinem Grund nicht skaliert.
Michael
1
background-sizeist CSS 3 und wird noch nicht allgemein unterstützt.
Janmoesen
4
Es wird jetzt von den meisten Browserversionen unterstützt. Überprüfen Sie diese caniuse.com/#search=background-size
kiranvj
4

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.

Neil
quelle
2

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.

Dasith
quelle
2

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

Adyry
quelle
2

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>
user984003
quelle
1

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

Miguel Ballén
quelle
0

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

{
    background-size: cover;
}
Ceylan Pamir
quelle
1
Ich verstehe nicht, warum dies abgelehnt wird. Hat für mich gearbeitet. Werde meine Methode als Antwort posten.
chris
Ich stimme Chris hier zu. Dies löst das Problem auch in meinem Fall. Ich bin mir nicht sicher, warum es abgelehnt wurde!
ShellZero
3
Es funktioniert nicht mit Sprite (siehe Fragentitel), deshalb wird diese Lösung abgelehnt.
Dimko Desu
-8

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.

makubex
quelle