CSS スプライト内で画像を拡大縮小するにはどうすればよいですか?

CSS スプライトで画像を拡大縮小する方法

CSS スプライトのコンテキストでは、大きな画像から小さな画像が切り取られます。効率的に表示するには、トリミングされた領域を拡大縮小する必要があることがよくあります。この記事では、この課題に対する解決策を提供します。

さまざまな方法を使用して CSS スプライトで画像のスケーリングを実現できます。

背景サイズの使用 (推奨):

background-size: 150% 150%;

background-size は、ほとんどの最新ブラウザで広くサポートされています。これにより、画像を水平方向と垂直方向の両方に拡大縮小できます。

クロスブラウザ サポートのためのズームとtransform:scaleの使用:

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

このアプローチでは、ズームを使用してWebkit/Blink/IE ブラウザーと、Mozilla(-moz-) および古い Opera(-o-) ブラウザー用のtransform:scale によるクロスブラウザーの実現互換性。

注: ソリューションを実装するときは、ブラウザーのサポートを考慮することが重要です。これらの手法を運用環境で使用する前に、ブラウザの互換性を必ず確認してください。

以上がCSS スプライト内で画像を拡大縮小するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。