Sprites für Icons mit reaktionsfähiger Größe wie `background-size: contain;`

Ich habe eine App mit vielen Icons. Ich weiß, dass die Verwendung von Sprites für diese Symbole der richtige Weg ist, anstatt mehrere kleine Bilder zu haben. Allerdings habe ich diese Symbole benötigt, um die gleiche Größe wie der Behälter (background-size: contain;) zu sein, so war ich gezwungen, um mehrere Bilder für jedes Symbol zu verwenden:Sprites für Icons mit reaktionsfähiger Größe wie `background-size: contain;`

.icon1 { 
    background-image: url('../my-site/icon1.gif'); 
    background-size: contain; 
} 

.icon2 { 
    background-image: url('../my-site/icon2.gif'); 
    background-size: contain; 
} 
. . . and so on...

Sprites jedoch verwenden, würde zu:

(ohne background-size: contain;) - Bild so klein ist, wenn also Taste
groß ist (background-size: contain; verwenden) - ten Der ganze Sprite wird dem Container gezeigt!

Gibt es eine Möglichkeit, eine ansprechende Sprite zu verwenden, die das Symbol zeigen würde (background-position mit) und machen das Symbol 100% Breite und Höhe des Behälters?

Quelle

2017-09-06 Geoman Yabes

Wenn es ein Sprite ist, enthält oder Abdeckung zeigt viele von ihnen, müssen Sie auf ein und Hintergrund-Größe auf das erforderliche Verhältnis zu konzentrieren, um unerwünschte Teile zu schneiden. Veröffentlichen Sie genügend Code und das Sprite, das Ihr Problem anzeigt, um effizient zu helfen. thanks for you –

möglich duplicate von https://stackoverflow.com/questions/45595520/css-sprite-background-sizecover/45596000 zumindest die antwort ich gab erklärt ein wenig;) –

genial .. das könnte es sein –

Es gibt keine magische Lösung, um das traurig zu erreichen. Sie müssen die Größe des Hintergrunds manuell anpassen.

#home { 
 
    width: 46px; 
 
    height: 44px; 
 
    background: url(https://i.imgur.com/1ijjJJU.gif) 0 0; 
 
} 
 

 
#next { 
 
    width: 43px; 
 
    height: 44px; 
 
    background: url(https://i.imgur.com/1ijjJJU.gif) -91px 0; 
 
} 
 

 
#home-double { 
 
    width: 92px; 
 
    height: 88px; 
 
    background: url(https://i.imgur.com/1ijjJJU.gif) 0 0; 
 
    background-size: 268px; 
 
} 
 

 
#next-double { 
 
    width: 86px; 
 
    height: 88px; 
 
    background: url(https://i.imgur.com/1ijjJJU.gif) -182px 0; 
 
    background-size: 268px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
</style> 
 
</head> 
 
<body> 
 

 
<p>Normal size</p> 
 
<p><img id="home" src="img_trans.gif"></p> 
 
<p><img id="next" src="img_trans.gif"></p> 
 

 
<p>Double size</p> 
 
<p><img id="home-double" src="img_trans.gif"></p> 
 
<p><img id="next-double" src="img_trans.gif"></p> 
 

 
</body> 
 
</html>

Beachten Sie, dass die Hintergrundgröße müssen Sie auch die Hintergrundposition ändern, um mit zu verändern.

Natürlich ist es verrückt und macht keinen Sinn.

Ich habe vor kurzem aufgehört, Sprite zugunsten von SVG Sprites zu verwenden. Sie sind unglaublich und flexibler und erlauben Ihnen, viel mehr zu tun. Sie können ihre Farbe und Größe ändern, gut auf Retina-Bildschirmen spielen.

Wenn Sie immer noch PNG-Symbole bevorzugen würde ich sagen, die Sprites Graben. Es ist schwierig, sie zu pflegen, selbst mit einem richtigen Build-Prozess. Gehen Sie für https und http2, dann haben Sie absolut kein Problem mit mehreren gleichzeitigen Anfragen.

Quelle

2017-09-06 11:22:23

Sprites für Icons mit reaktionsfähiger Größe wie `background-size: contain;`

Antwort

Verwandte Themen