レスポンシブなスプライト/パーセンテージ
Cssを使用してレスポンシブスプライトに関するすべての質問を読んで、レスポンシブスプライトの実例でjsfiddleを見ましたが、背景位置と背景サイズの割合を取得する方法、ラッパー（一部の人々はそれが必要だと言います）background-imageを使用するdivの周りとそれを使用する理由...
たとえば、width：20％（たとえば40px）の円形のdivがある場合。 background-imageとして使用する必要がある画像の幅は80ピクセル（円で、divに合わせてサイズを変更する必要があります）で、Spriteシートにある40個の画像の1つです。 -173px -293pxの位置にあります。
実際に機能させる方法がわかりません。
私は試した：
div {
width:20%;
border-radius:50%;
background: url('images/sprites.png') no-repeat 72.083% 67.981%;
background-size: 50%;
}
もちろん、うまくいきませんでした。 background-size-x、background-position-y（私が持っている数字は「自動」サイズのスプライトシートから取得されます）を取得する方法がわかりません。背景サイズが自動でない場合、または背景サイズがdivサイズの割合に関連します。
使用できる数式はありますか？誰も私を説明したり、私がそれを学ぶことができるいくつかのウェブサイト/本の名前を教えてもらえますか？
ありがとう、
Div次元は計算では再生されず、背景サイズと使用する部分のみが再生されます。
背景の幅が1000ピクセル、高さが500ピクセルだとしましょう。
使用する画像の幅と高さは80ピクセルです。
背景サイズ：
x part 1000px / 80px = 12.5 ->> 1250%
y part 500px / 80px = 6.25 ->> 625%
background-size: 1250% 625%;
背景位置：
x-part 173px / 1000px = 0.173 ->> 17.3%
y part 293px / 500px = 0.586 ->> 58.6%
background-position: 17.3% 58.6%;
@valsの回答の更新。彼の計算のいくつかは私にとってはうまくいきませんでした。
背景サイズの計算は機能しましたが、最終的なパーセンテージの数値を得るために、100ではなく1000を掛けていました。したがって、12500％は1250％になります。 （更新：2015年10月-@valsは彼の答えでこれを修正したようです。）
バックグラウンド位置のX値の計算は、私にとって非常にわずかでした。それらは、spritecow.comによって生成されたものと一致しませんでした（Adrian Florescuの提案による）。これは、絶対座標は背景画像の左から計算されるのに対し、パーセンテージでは背景画像の右から計算する必要があるためだと思います。その場合、全体の背景幅から画像の幅を差し引く必要がありますbefore絶対x-pos数をそれで割ります。
代わりに：
x-part 173px / 1000px = 0.173 ->> 17.3%
これを行う：
x-part 173px / (1000px - 80px) = 0.1880434783 ->> 18.80434783%
どこ：
1000pxは背景画像（スプライト）の幅です
80pxは表示される画像の幅です
173pxは、表示される画像の絶対x座標です。
とにかく、これは私のために働くものです！
Responsive CSS Sprite Generator を作成して、すべての作業を処理します。たくさんの画像をアップロードするだけで、スプライト画像とそのCSSが得られます。
スプライトをレスポンシブにするための斬新な方法-透明なPNGを使用して画像のアスペクト比を維持するデータsrcを使用するため、他の方法とは異なり、画像は正方形またはすべて同じ比率である必要はありません。
これは最良のレスポンシブの例ですSprite！
クロスブラウザ、CSSスプライト画像のレスポンシブなサイズ変更/ストレッチ
このメソッドはbackground-sizeに依存しないため、古いブラウザで動作します。
この例では、幅800 x高さ160の画像を使用しています。この画像には、6つの等しいサイズのスプライト（各160x160）が含まれています。
スプライトのサイズが異なる場合、変更する必要があるのは、個々のスプライトの幅に一致する.Spriteのmax-widthプロパティだけです。
表示されるスプライトを設定するには：.Spriteの左の値を次のように設定します：0 = 1番目のスプライト-100％= 2番目のスプライト-200％= 3番目のスプライトなど...簡単！
画像を本来のサイズよりも大きく引き伸ばしたい場合：クラス.no-limitを.stretchyに追加します。これにより、.stretchyからmax-width：160pxが削除され、min-height：100％が.Spriteに追加されます。または、px値を使用してより大きなmax-widthを設定できます。 300px。
スペーサー画像は、個々のスプライトの寸法に比例する限り、任意のサイズにすることができます。
これは簡単なソリューションです。これをチェックしてください
.my_picture{
//target your Sprite
background: url(my_img.jpg) no-repeat;
//Specify it full image
backgound-size: 100%;
//Position of the targeted picture
background-position: left 0 bottom x%;
//Zoom in or out on the position
width: x%;
//Scale height by playing with padding
padding-bottom: x%;
//Set height to 0 because of Sprite size
height: 0;
}
どのように機能しますか？スプライトの画像を簡単にターゲットにするには、スプライトのサイズを元の「100％」に指定する必要があります。次に、対応する下から左0の位置に画像を配置します。
スプライトのサイズは最大100％に設定されているため、高さを無効にする必要があります。ここで高さを設定する唯一のオプションは、パーセンテージでpadding-bottomを使用することです。
これで、画像は完全にレスポンシブになり、幅の値（パーセンテージ）で遊ぶだけでズームインまたはズームアウトでき、それだけで完全にレスポンシブなCSSスプライトができました。
ここに私のブログの元の記事： http://creativcoders.wordpress.com/2014/05/05/css-responsive-sprites/
Webサイトを使用して、スプライトの正確な座標を確認できます。私は個人的に http://www.spritecow.com/ を使用しています
私はこの問題に関する答えを探すのに多くの時間を費やしました、私はこの解決策を思い付きました、少なくとも今のところ私にとってはうまくいきますそのパーセンテージのピクセル値、およびランダムに配置されたスプライトの計算を行う必要があるため、randomの場所を見つける必要があるため画像内のスプライト、単純なタスクには数学が多すぎると思います。
必要なもの：
- 画像の幅を知る（
compass image-width($image)） - 画像内の元のピクセルサイズとスプライトの位置（Photoshopがトリックを行います）
- 表示する予定の対応するスプライトに比例する収容ボックスのサイズ
- そしてもちろん、特定のスプライトに適用するストレッチの量。
アドバイスとして、パーセンテージは整数ピクセルではないため、各画像の間に少なくとも1pxの物理的マージンを残しておく必要があり、スプライトが重複することになります!! ;）
それをチェックして、フィードバックをお願いします：
//functions
//stretch by percentage
@function stretchImage($width, $height, $percentage) {
$s_width: round( ($width * $percentage) / 100 );
$s_height: round( ($height * $percentage) / 100 );
@return ($s_width, $s_height);
}
//strip units
//(Eric M Suzanne) http://stackoverflow.com/questions/12328259/how-do-you-strip-the-unit-from-any-number-in-sass
@function strip-units($number) {
@return $number / ($number * 0 + 1);
}
//replace in string
//(css tricks) http://css-tricks.com/snippets/sass/str-replace-function/
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
//get unitless percentage
@function getPercentageFrom($valueA, $valueB) {
$percentage: percentage(strip-units($valueA)/strip-units($valueB));
@return ($percentage);
}
//now the magic
//we know the witdh of the image containing the sprites
$image: url(http://www.cssguy4hire.com/codePenAssets/Sprite_test.png);
$image_width: 965px;
//the amount of strech we want to aply
$stretchTo: 175;
//we know the current Sprite measures we going to set
$Sprite_width: 150px;
$Sprite_height: 150px;
//left is 0 cuz is first Sprite
$Sprite_left: 0%;
//stretch Sprite
$stretch: stretchImage($Sprite_width, $Sprite_height, $stretchTo);
$width: nth($stretch, 1);
$height: nth($stretch, 2);
//set background size and position
$bkg-size: getPercentageFrom($image_width * ($stretchTo / 100), $width);
//default position 0
$bkg_left: $Sprite_left;
//compose the css
#image {
margin: auto;
width: $width;
height: $height;
position: relative;
display: block;
background: #00f00f $image $bkg_left 0 no-repeat;
background-size: $bkg-size;
border: 5px solid #cccccc;
//we chage the Sprite
&.Sprite_1 {
//the amount of strech we want to aply
$stretchTo: 250;
//we know the current Sprite measures we going to set
//0 is te first Sprite starting left to right
$Sprite_width: 250px;
$Sprite_height: 75px;
$Sprite_left: 150px;
//stretch Sprite
$stretch: stretchImage($Sprite_width, $Sprite_height, $stretchTo);
$width: nth($stretch, 1);
$height: nth($stretch, 2);
//set background size
$bkg-size: getPercentageFrom($image_width * ($stretchTo / 100), $width);
$bkg_left: percentage($Sprite_left / ($image_width - $Sprite_width) );
//compose the css
width: $width;
height: $height;
background-size: $bkg-size;
background-position: $bkg_left 0;
}
&.Sprite_2 {
//the amount of strech we want to aply
$stretchTo: 80;
//we know the current Sprite measures we going to set
$Sprite_width: 140px;
$Sprite_height: 120px;
$Sprite_left: 400px;
//stretch Sprite
$stretch: stretchImage($Sprite_width, $Sprite_height, $stretchTo);
$width: nth($stretch, 1);
$height: nth($stretch, 2);
//set background size
$bkg-size: getPercentageFrom($image_width * ($stretchTo / 100), $width);
$bkg_left: percentage($Sprite_left / ($image_width - $Sprite_width) );
//compose the css
width: $width;
height: $height;
background-size: $bkg-size;
background-position: $bkg_left 0;
}
&.Sprite_3 {
//the amount of strech we want to aply
$stretchTo: 125;
//we know the current Sprite measures we going to set
$Sprite_width: 290px;
$Sprite_height: 134px;
$Sprite_left: 540px;
//stretch Sprite
$stretch: stretchImage($Sprite_width, $Sprite_height, $stretchTo);
$width: nth($stretch, 1);
$height: nth($stretch, 2);
//set background size
$bkg-size: getPercentageFrom($image_width * ($stretchTo / 100), $width);
$bkg_left: percentage($Sprite_left / ($image_width - $Sprite_width) );
//compose the css
width: $width;
height: $height;
background-size: $bkg-size;
background-position: $bkg_left 0;
}
&.Sprite_4 {
//the amount of strech we want to aply
$stretchTo: 153;
//we know the current Sprite measures we going to set
$Sprite_width: 135px;
$Sprite_height: 56px;
$Sprite_left: 830px;
//stretch Sprite
$stretch: stretchImage($Sprite_width, $Sprite_height, $stretchTo);
$width: nth($stretch, 1);
$height: nth($stretch, 2);
//set background size
$bkg-size: getPercentageFrom($image_width * ($stretchTo / 100), $width);
$bkg_left: percentage($Sprite_left / ($image_width - $Sprite_width) );
//compose the css
width: $width;
height: $height;
background-size: $bkg-size;
background-position: $bkg_left 0;
}
}
私のアプローチは、レスポンシブcssスプライトを生成するツールを作成したという点でGregのアプローチに似ています。ただし、さらに一歩進めて、ソートアルゴリズムを追加して、より多くの画像を効率的にPNGにパックできるようにしました。
レスポンシブCSSスプライトジェネレーターツールを次に示します。 https://responsive-css.us/
大規模なFEの経験から、背景画像に依存しないレスポンシブスプライトフレームワークを開発しましたが、代わりに、元の画像/スプライトの一部のようにスケーリングされたコンテナ内の「物理」画像を使用します。 css bgd-imgの問題は、サイズと位置を計算し、cssがいくつかのピクセルで写真の位置を「ミス」することです。ほとんどのブラウザはこれらの値を0.1pxでレンダリングしますが、同様に丸めます。したがって、精度は（pxの約1/2）です。 このミスマッチは、（レスポンシブにするために）スケーリングしようとすると増加します。-CSSの背景に依存する「レスポンシブなスプライト」にだまされてはいけません-画像。それらは、あなたが必要とするスプライト画像の悪いディスプレイスメントです。 -JavaScript（フレームワーク）ははるかに精密です 1/100px）、およびレスポンシブ画像の堅実な基盤-写真をスケーリングし、ピクセルを失うことのない1/50サイズがあるため。私はこれを宣伝していません、誰かが興味を持っているなら-を見てください：---（responsive-sprites.com