画像の操作：
背景画像のサイズを取得
指定したNodeの背景に設定されている画像のサイズを取得する。
画像ファイルのリアルサイズか、CSSで設定しているサイズかを指定可能。
Node
Nodeを渡す id値を文字列で指定してもよい
Bool
サイズの種類を指定 true = 画像ファイルのサイズ ・ false = CSSで指定しているサイズ ／ 省略した場合は false となる
Number
複数の背景画像が設定されている場合の配列番号 0 = 1枚目 ・ 1 = 2枚目 … ／ 省略した場合は 0 となる
●必須引数 ●オプション引数(省略可能)
記述例
$imgGetBgSize($id('block1'))
$imgGetBgSize('block1', true)
$imgGetBgSize('block1', 1)
$imgGetBgSize('block1', true, 1)
戻り値
○横幅と高さのpx値を連想配列で返す
['W']：横幅
['H']：高さ
○サイズの種類でCSSサイズを指定していて、数値以外が設定されている場合
・数値ではない cover や contain が設定されている場合は、そのまま文字列を返す。
動作サンプル
下のボックスに設定されている背景画像のサイズを取得して出力する。
<div>
背景画像を設定済み
背景画像を設定済み
Sass :
#sample1 {
& > div {
background: url(../images/bg.png);
background-size: 64px 32px;
}
}
Javascript :
var cssW=$imgGetBgSize($tag('div','sample1',0))['W'];
var cssH=$imgGetBgSize($tag('div','sample1',0))['H'];
var realW=$imgGetBgSize($tag('div','sample1',0),true)['W'];
var realH=$imgGetBgSize($tag('div','sample1',0),true)['H'];
下のボックスに設定されている2枚目の背景画像のサイズを取得して出力する。
<div>
背景画像はドット柄と写真の2枚
背景画像はドット柄と写真の2枚
Sass :
#sample2 {
& > div {
background:
url(../images/cmn_bg_2a.png),
url(../../images/pht_2.jpg);
background-size:
64px auto,
cover;
}
}
Javascript :
var cssW=$imgGetBgSize($tag('div','sample2',0),1)['W'];
var cssH=$imgGetBgSize($tag('div','sample2',0),1)['H'];
var realW=$imgGetBgSize($tag('div','sample2',0),true,1)['W'];
var realH=$imgGetBgSize($tag('div','sample2',0),true,1)['H'];
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。