Comment puis-je redimensionner une image recadrée dans un sprite CSS ?

Redimensionner une image recadrée dans un sprite CSS

Dans l'article « Créer des sprites CSS pour améliorer les performances de votre page », il explique comment recadrer une image plus petite à partir d’une image plus grande. Cependant, vous pouvez rencontrer un scénario dans lequel vous devez redimensionner l'image recadrée avant de l'incorporer dans votre conception. Ceci peut être réalisé en utilisant diverses techniques.

Méthode Background-Size (IE9, navigateurs modernes)

Utilisez la propriété background-size pour spécifier la taille mise à l'échelle souhaitée du image recadrée. Par exemple, si vous souhaitez doubler la taille de l'image, utilisez la valeur 150 % 150 %.

background-size: 150% 150%;

Zoom et mise à l'échelle de transformation

Pour une compatibilité entre navigateurs , combinez le zoom pour les navigateurs WebKit/Blink/IE avec transform:scale pour Mozilla et les anciens Opera navigateurs.

[class^="icon-"] {
  display: inline-block;
  background: url('../img/icons/icons.png') no-repeat;
  width: 64px;
  height: 51px;
  overflow: hidden;
  zoom: 0.5;
  /* Mozilla support */
  -moz-transform: scale(0.5);
  -moz-transform-origin: 0 0;
}

.icon-big {
  zoom: 0.60;
  /* Mozilla support */
  -moz-transform: scale(0.60);
  -moz-transform-origin: 0 0;
}

.icon-small {
  zoom: 0.29;
  /* Mozilla support */
  -moz-transform: scale(0.29);
  -moz-transform-origin: 0 0;
}

Cette méthode vous permet de mettre à l'échelle des régions recadrées spécifiques du sprite sans affecter les autres segments. Vous pouvez ajuster les valeurs de zoom et d'échelle pour obtenir les tailles souhaitées.

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!