sprites CSS haute résolution

Question

Je génère des sprites CSS. Je veux utiliser ces sprites à plusieurs tailles. J'ai recherché mais n'ai pas été capable de comprendre comment mettre à l'échelle fonctionnellement un sprite CSS - par exemple. si le sprite original est à 150x150 et que je veux l'afficher à 50x50, comment puis-je faire cela? background-size semble le casser.

Je peux simplement générer les sprites aux tailles requises, mais quand je le fais via -resize de ImageMagick, je prends une résolution notable. Habituellement, si je trouve qu'une image est à une résolution inacceptable sur une page Web, je fais simplement une image plus grande et augmente sa taille, ce qui augmente la résolution de l'image. Comme je n'arrive pas à comprendre comment mettre à l'échelle une image-objet CSS, je suis un peu bloqué. Comment puis-je obtenir une résolution arbitraire avec une image-objet CSS?

Answer 1

La façon la plus élégante que vous pouvez faire est d'utiliser CSS3 background-size, mais cela est pas pris en charge sur tous les navigateurs (IE par exemple < = 8). Vous pouvez rechercher dans les transformations spécifiques à IE ou les filtres que vous pouvez utiliser, puis ajouter les sélecteurs -mz-, -webkit- et -o- pour obtenir l'effet que vous voulez sur les navigateurs que vous ciblez.

La méthode la moins élégante consiste à truquer l'échelle et le positionnement de l'image-objet.

Le code HTML

<div class="ex3"> 
    <img src="http://www.placekitten.com/g/600/400"/> 
</div> 

Le CSS

.ex3 { 
    position: relative; 
    overflow: hidden; 
    width: 50px; 
    height: 50px; 
} 
.ex3 img { 
    position: absolute; 
    top: -25px; 
    left: -25px; 
    width: 150px; /* Scaled down from 600px */ 
    height: 100px; /* Scaled down from 400px */ 
} 

Le Fiddle

http://jsfiddle.net/brettwp/s2dfT/

Answer 2

Je ne connais aucun moyen de modifier la taille d'une image-objet CSS, désolé.

Comme pour générer les sprites CSS, essayez: http://spriteme.org/

Ou pour l'édition d'image générale: http://www.gimp.org/

Vous pouvez modifier les composants individuels d'image, puis utilisez SpriteMe pour générer le Sprite. Vous ne voulez pas générer l'image-objet, puis redimensionner l'ensemble de l'image Sprite, car vos positions CSS pour chaque élément individuel seront alors supprimées.

Answer 3

Les options que je vois sont:

1. Ou ont le contenu de l'image-objet dans différentes tailles dans un sprite.

2. Ou prenez l'image-objet d'origine et redimensionnez-la manuellement une fois pour en créer une copie plus petite. Ensuite, faites référence à la version plus petite de l'image-objet lorsque vous avez besoin des plus petites images.