Maison > interface Web > tutoriel CSS > Comment redimensionner les images dans un sprite CSS ?

Comment redimensionner les images dans un sprite CSS ?

Linda Hamilton
Libérer: 2024-12-06 06:08:14
original
367 Les gens l'ont consulté

How to Scale Images Within a CSS Sprite?

Comment redimensionner une image dans un sprite CSS

Dans le contexte des sprites CSS, où des images plus petites sont recadrées à partir d'une image plus grande pour Pour un affichage efficace, il est souvent nécessaire de redimensionner les zones recadrées. Cet article propose une solution à ce défi.

Vous pouvez réaliser la mise à l'échelle de l'image dans un sprite CSS en utilisant diverses méthodes.

Utilisation de background-size (recommandé) :

background-size: 150% 150%;
Copier après la connexion

background-size est largement pris en charge par la plupart des navigateurs modernes. Il vous permet de redimensionner l'image horizontalement et verticalement.

Utilisation du zoom et de transform:scale pour la prise en charge de plusieurs navigateurs :

[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-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;
}
Copier après la connexion

Cette approche utilise le zoom pour Navigateurs Webkit/Blink/IE et transform:scale pour les navigateurs Mozilla(-moz-) et anciens Opera(-o-) pour obtenir des résultats multi-navigateurs compatibilité.

Remarque : Il est important de prendre en compte la prise en charge du navigateur lors de la mise en œuvre de la solution. Vérifiez toujours la compatibilité du navigateur avant d'utiliser ces techniques en production.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal