Größe Bild von Sprite mit CSS

Ich habe ein CSS-Sprite mit verschiedenen Symbolen in der Größe 32x32px.Größe Bild von Sprite mit CSS

Nun, was ich brauche, ist eines dieser Symbole in 20x20px Größe anzuzeigen. Ich habe ein paar Dinge ausprobiert, wie zum Beispiel die Größe auf 20px einstellen, mit background-size: cover, oder mit transform: scale (0.625) - aber keiner meiner Versuche gibt das gewünschte Ergebnis.

HTML für meine Tests:

32px icons: 

<div class="sprite" style="background-position:0px 32px;">&nbsp;</div> 
<div class="sprite" style="background-position:64px 32px;">&nbsp;</div> 
<div class="sprite" style="background-position:32px 96px;">&nbsp;</div> 
<div class="sprite" style="background-position:0px 0px;">&nbsp;</div> 
<div class="sprite" style="background-position:32px 64px;">&nbsp;</div> 

<hr> 
20px icons (attempts): 

<div class="sprite" style="background-position:32px 64px; width:20px; height:20px;">&nbsp;</div> 
<div class="sprite" style="background-position:32px 64px; width:20px; height:20px; background-size:cover;">&nbsp;</div> 
<div class="sprite" style="background-position:32px 64px; width:20px; height:20px; transform:scale(0.625);">&nbsp;</div>

CSS für meine Tests:

.sprite { 
    background-image:url(http://buildnewgames.com/assets/article//dom-sprites/spritesheet.png); 
    width:32px; 
    height:32px; 
}

haben Sie einen Blick auf diese Geige zu sehen, was ich versucht:

https://jsfiddle.net/dfqh0yrc/4/

Quelle

2016-12-15 pimeys

Mögliche Duplikat [Wie kann ich ein Bild in einem CSS-Sprites skaliert] (http://stackoverflow.com/questions/2430206/how-can-i-scale- An-Bild-in-a-css-Sprite) – Punit

Sie können nur die scale ohne width verwenden und height wie folgt aus:

.sprite { 
 
    background:url(http://buildnewgames.com/assets/article//dom-sprites/spritesheet.png); 
 
    width:32px; 
 
    height:32px; 
 
}

32px icons: 
 
<div class="sprite" style="background-position:0px 32px;">&nbsp;</div> 
 
<div class="sprite" style="background-position:64px 32px;">&nbsp;</div> 
 
<div class="sprite" style="background-position:32px 96px;">&nbsp;</div> 
 
<div class="sprite" style="background-position:0px 0px;">&nbsp;</div> 
 
<div class="sprite" style="background-position:32px 64px;">&nbsp;</div> 
 
<hr> 
 
20px icons (attempts): 
 
<div class="sprite" style="background-position:32px 64px; transform:scale(0.625);">&nbsp;</div> 
 
<div class="sprite" style="background-position:32px 64px; transform:scale(calc(20/32));">&nbsp;</div>

Sie auch calc können den Skalierungsfaktor wie die folgenden berechnen:

<div class="sprite" style="background-position:32px 64px; transform:scale(calc(20/32));">&nbsp;</div>

Demo auf JSFiddle:https://jsfiddle.net/dfqh0yrc/5/

Quelle

2016-12-15 07:02:35

Dies funktioniert hervorragend für die Größenänderung von 32px zu 20px! Aber ich habe ein kleines Problem bei der Größenänderung von 24px zu 20px, die eine Skala von 0,8333333333333333 ist. Es sieht so aus, als ob dort ein Pixel fehlt, wahrscheinlich aufgrund von Rundungen, was dazu führt, dass es mit dem Rest des Layouts falsch ausgerichtet ist. Gibt es eine Möglichkeit, dieses fehlende Pixel zu umgehen? – pimeys

können Sie eine Bild-URL mit dem 24px-Sprite bereitstellen? Probieren Sie die Calc-Methode 'calc (20/24)' ' –

Neue Geige hier, mit einem 24px Sprite. Ich habe versucht, grüne '.s20' Divs um das Bild zu machen. Wenn es ein 20px-Ding war, sollte es perfekt in der Mitte ausgerichtet sein, oder? https://jsfiddle.net/dfqh0yrc/6/ – pimeys

Versuchen Sie Hintergrundgröße in CSS.

Beispiel: Hintergrundgröße: 25% 25%;

Hoffe das löst Ihr Problem.

Quelle

2016-12-15 07:01:58 Thamizhselvan

Größe Bild von Sprite mit CSS

Antwort

Verwandte Themen