背景画像がこのマークアップで拡大縮小されるのはなぜですか？

Question

私のスタイルの定義は次のとおりです。

<style> 
    .x { background-image:url(https://raw.githubusercontent.com/iamcal/emoji-data/master/sheet_emojione_64.png); 
     border:solid 1px red; 
    } 
</style> 

上記image fileは64pxの正方形セル内の絵文字を含む2624px X 2624pxです。 64は2624の1/41です。セル13,7の画像はラクダです。

私のマークアップは次のとおりです。

<div class='x' style='background-position:-832px -448px; height:64px; width:64px;' ></div> 
<div class='x' style='background-position:-832px -448px; background-size:4100%; 
    height:64px; width:64px;' ></div> 
<div class='x' style='background-position:-312px -168px; background-size:4100%; 
    height:24px; width:24px;' ></div> 

JSフィドルがhttps://jsfiddle.net/5j5ahhda/であり、出力は次のとおりです。

二DIVの私の理解では、私はに2624px画像を絞っていますということですサイズが64分の1の正方形で、サイズの1/4倍の大きさで41回吹き付けられ、元のサイズと同じ画像になります。このことは正しいのでしょうか？

第3のDIVは、私が達成するために設定したものですが、背景画像が24/64にうまくスケールされる原因はわかりません。それはスケーリングの原因となるDIVを含む指定されたサイズですか？

私が望むのは元の画像サイズの24/64です。より簡単な方法はありますか？

Answer 1

第DIVの私の理解が、私はそのサイズの1 /第41回、64px角に2624px画像を圧搾し、その後41回、それを爆破、従ってオリジナルと同じ画像が得られるだということですサイズ。このことは正しいのでしょうか？

はい。

第3のDIVは、達成するために設定したものですが、背景画像が24/64にうまくスケールされる原因はわかりません。それはスケーリングの原因となるDIVを含む指定されたサイズですか？

はい。パーセントbackground-sizeはrelative to the size of the element's background positioning areaです。この領域は、画像のサイズではなく要素の寸法によって決まります。これは、パーセントがbackground-sizeに設定されている場合、要素の寸法に基づいて、要素のサイズに応じて背景画像を拡大縮小することができます。