私はCSSスプライトを生成しています。これらのスプライトを複数のサイズで使用したいと思います。私は検索しましたが、CSSスプライトをどのように機能的にスケールするかを理解できませんでした。元のスプライトが150x150で、50x50で表示したい場合、どうすればいいですか？ background-sizeそれを壊しているようです。高解像度CSSスプライト
私はちょうど必要なサイズでスプライトを生成できますが、ImageMagickの-resizeでこれを行うと、顕著な解像度でヒットします。通常、画像がウェブページ上で許容範囲外の低解像度であるとわかった場合、画像を拡大してサイズを拡大し、機能的に画像の解像度を上げます。
CSSのスプライトをどのようにスケールするのか分からないので、ちょっと固まっています.CSスプライトを使ってどのように任意の解像度にすることができますか？
最もエレガントな方法は、CSS3 background-sizeを使用することですが、これは（例えばIE < = 8）すべてのブラウザでサポートされていません。使用できるIE固有のトランスフォームやフィルタを調べ、-mz-、-webkit-、および-o-セレクタを追加して、ターゲットとするブラウザで必要な効果を得ることができます。
これを行うための最もエレガントな方法は、スプライトスケールを偽装して配置することです。
HTML
<div class="ex3">
<img src="http://www.placekitten.com/g/600/400"/>
</div>
CSS
.ex3 {
position: relative;
overflow: hidden;
width: 50px;
height: 50px;
}
.ex3 img {
position: absolute;
top: -25px;
left: -25px;
width: 150px; /* Scaled down from 600px */
height: 100px; /* Scaled down from 400px */
}
フィドル
CSSスプライトのサイズを変更する方法はわかりません。申し訳ありません。 CSSスプライトを生成するよう
、試してみてください。 http://spriteme.org/
または一般的な画像編集のために： http://www.gimp.org/
あなたは、個々の画像成分を編集し、スプライトを生成するSpriteMeを使用することができます。スプライトを生成し、スプライトイメージ全体のサイズを変更したくない場合は、個々の要素のCSS位置がスローされます。私が見
オプションは次のとおりです。
どちらかが1つのスプライトに異なるサイズでスプライトの内容を持っています。
元のスプライトを取り、それを手動でサイズ変更して、それより小さなコピーを作成します。小さな画像が必要な場合は、より小さなスプライトバージョンを参照してください。あなたがこれを行うことができます
これは、ImageMagickのサイズ変更の品質がCSSよりも重要だと思います。 –
@Diodeus ImageMagickを責めるのは公正ではありません。ベクタグラフィックスを使用している場合を除き、ソフトウェアから完全な品質の任意の解像度スケーリングを得ることはできません。 – koan
通常は、より高い解像度から始めてから、より低い解像度のバージョンを作成します。 IMがそれをうまくできないなら、それはやっかいだ。 –