170

この記事http://css-tricks.com/css-sprites/では、1 つの大きな画像から小さな画像を切り取る方法について説明しています。それが可能かどうか教えてください/どのように小さな画像を切り取り、レイアウトする前に切り取った領域を拡大縮小できますか?

その記事の例を次に示します。

A
{
  background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/3deb155981/spriteme1.png);
  background-position: -10px -56px;
}

spriteme1.png から切り抜いた後、その画像を拡大縮小する方法を知りたい

例の URL は次のとおりです: http://css-tricks.com/examples/CSS-Sprites/Example1After/

Item1,2,3,4の横にあるアイコンを小さくできないか教えてください。

4

15 に答える 15

141

2021 更新: 背景サイズはほとんどの主要なブラウザーでサポートされていますが、モバイル ブラウザーがサポートしていない場合はズームを使用してください。

ほとんどのブラウザーでサポートされているため、background-sizeを使用できます (ただし、すべてのhttp://caniuse.com/#search=background-sizeではありません) 。

background-size : 150% 150%;

または

webkit/blink/ieのzoomと、Mozilla (-moz-) のtransform:scaleと、クロスブラウザーのデスクトップとモバイルの古い Opera (-o-)の組み合わせを使用できます。

[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;
}
于 2013-04-18T10:52:42.243 に答える
32

スプライトを使用する場合、スプライト内の画像のサイズに制限されます。Stephen が言及したbackground-sizeCSS プロパティは、まだ広くサポートされておらず、IE8 以下のようなブラウザーで問題を引き起こす可能性があります。また、市場シェアを考えると、これは実行可能なオプションではありません。

この問題を解決する別の方法は、2 つの要素を使用し、次のimgようにタグを使用してスプライトをスケーリングすることです。

<div class="sprite-image"
     style="width:20px; height:20px; overflow:hidden; position:relative">
    <!-- set width/height proportionally, to scale the sprite image -->
    <img src="sprite.png" alt="icon"
         width="20" height="80"
         style="position:absolute; top: -20px; left: 0;" />
</div>

このように、外側の要素 ( div.sprite-image) はタグから 20x20px の画像を切り取っています。imgこれは、スケーリングされた のように機能しますbackground-image。

于 2010-03-18T16:41:23.697 に答える
20

これを試してみてください: Stretchy Sprites - CSS スプライト画像のクロスブラウザー、レスポンシブなサイズ変更/ストレッチ

このメソッドは、スプライトを「レスポンシブに」スケーリングして、幅/高さがブラウザ ウィンドウのサイズに応じて調整されるようにします。古いブラウザではこれがサポートされていないため、使用しません background-size。

CSS

.stretchy {display:block; float:left; position:relative; overflow:hidden; max-width:160px;}
.stretchy .spacer {width: 100%; height: auto;}
.stretchy .sprite {position:absolute; top:0; left:0; max-width:none; max-height:100%;}
.stretchy .sprite.s2 {left:-100%;}
.stretchy .sprite.s3 {left:-200%;}

HTML

<a class="stretchy" href="#">
  <img class="spacer" alt="" src="spacer.png">
  <img class="sprite" alt="icon" src="sprite_800x160.jpg">
</a>
<a class="stretchy s2" href="#">
  <img class="spacer" alt="" src="spacer.png">
  <img class="sprite" alt="icon" src="sprite_800x160.jpg">
</a>
<a class="stretchy s3" href="#">
  <img class="spacer" alt="" src="spacer.png">
  <img class="sprite" alt="icon" src="sprite_800x160.jpg">
</a>
于 2012-05-31T02:35:56.940 に答える
14

transform: scale();元の要素のサイズを維持します。

を使用するのが最適なオプションであることがわかりましたvw。それは魅力のように機能しています：

https://jsfiddle.net/tomekmularczyk/6ebv9Lxw/1/

#div1,
#div2,
#div3 {
  background:url('//www.google.pl/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png') no-repeat;
  background-size: 50vw;   
  border: 1px solid black;
  margin-bottom: 40px;
}

#div1 {
  background-position: 0 0;
  width: 12.5vw;
  height: 13vw;
}
#div2 {
  background-position: -13vw -4vw;
  width: 17.5vw;
  height: 9vw;
  transform: scale(1.8);
}
#div3 {
  background-position: -30.5vw 0;
  width: 19.5vw;
  height: 17vw;
}
<div id="div1">
  </div>
  <div id="div2">
  </div>
  <div id="div3">
  </div>

于 2016-12-10T11:21:19.670 に答える
7

これを行うために私がしたことは次のとおりです。IE8以下では動作しませんのでご注意ください。

#element {
  width:100%;
  height:50px;
  background:url(/path/to/image.png);
  background-position:140.112201963534% 973.333333333333%;
}

の親が縮小すると、背景画像の幅が縮小され#elementます。heightパーセンテージに変換すると、高さも同じことができます。唯一のトリッキーなビットは、 のパーセンテージを計算することですbackground-position。

最初のパーセンテージは、通常の幅の場合のスプライトのターゲット領域の幅をスプライトの合計幅で割り、100 を掛けたものです。

2 番目のパーセンテージは、スケーリングされる前のスプライトのターゲット領域の高さをスプライトの全高で割り、100 を掛けたものです。

これらの 2 つの方程式の表現は少しずさんですので、もっと詳しく説明する必要がある場合はお知らせください。

于 2011-10-07T13:43:34.960 に答える
4

背景サイズを試してみてください: http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm

そもそも必要なサイズで画像をレンダリングするのを妨げているものはありますか?

于 2010-03-12T03:32:19.403 に答える
2

transform: scale(0.8);0.8 の代わりに必要な値で使用します

于 2019-09-05T02:12:12.000 に答える
-1

スプライト画像のラッパー要素に幅と高さを設定します。このcssを使用します。

{
    background-size: cover;
}
于 2014-10-13T15:15:51.617 に答える
-8

簡単... ​​スプライトのシートで同じ画像の異なるスケールの 2 つのコピーを使用します。アプリのロジックで Coords とサイズを設定します。

于 2015-06-23T15:23:19.613 に答える