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

CSS スプライトでトリミングされた画像を拡大縮小する

記事「ページのパフォーマンスを向上させる CSS スプライトの作成」では、次の方法について説明しています。大きな画像から小さな画像をトリミングします。ただし、デザインに組み込む前に、切り取った画像を拡大縮小する必要があるシナリオが発生する場合があります。これは、さまざまな手法を使用して実現できます。

Background-Size メソッド (IE9、最新のブラウザ)

background-size プロパティを使用して、必要なスケール サイズを指定します。トリミングされた画像。たとえば、画像サイズを 2 倍にしたい場合は、値 150% 150% を使用します。

background-size: 150% 150%;

ズームと変形のスケーリング

ブラウザ間の互換性のため、WebKit/Blink/IE ブラウザーのズームと、Mozilla および古い Opera のtransform:scale を組み合わせます。

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

このメソッドを使用すると、他のセグメントに影響を与えることなく、スプライトの特定のトリミングされた領域を拡大縮小できます。ズームとスケールの値を調整して、希望のサイズを実現できます。

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