Wie skaliert man Bilder innerhalb eines CSS-Sprites?

So skalieren Sie ein Bild in einem CSS-Sprite

Im Kontext von CSS-Sprites, bei denen kleinere Bilder aus einem größeren Bild zugeschnitten werden Um eine effiziente Darstellung zu ermöglichen, besteht häufig die Notwendigkeit, die zugeschnittenen Bereiche zu skalieren. Dieser Artikel bietet eine Lösung für diese Herausforderung.

Sie können die Bildskalierung in einem CSS-Sprite mit verschiedenen Methoden erreichen.

Hintergrundgröße verwenden (empfohlen):

background-size: 150% 150%;

Hintergrundgröße wird von den meisten modernen Browsern weitgehend unterstützt. Damit können Sie das Bild sowohl horizontal als auch vertikal skalieren.

Zoom und transform:scale für Cross-Browser-Unterstützung verwenden:

[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;
}

Dieser Ansatz verwendet Zoom für Webkit/Blink/IE-Browser und transform:scale für Mozilla(-moz-) und alte Opera(-o-)-Browser, um Cross-Browser zu erreichen Kompatibilität.

Hinweis: Bei der Implementierung der Lösung ist es wichtig, die Browserunterstützung zu berücksichtigen. Überprüfen Sie immer die Browserkompatibilität, bevor Sie diese Techniken in der Produktion verwenden.

Das obige ist der detaillierte Inhalt vonWie skaliert man Bilder innerhalb eines CSS-Sprites?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!