画像の操作：
指定したclassを持つ画像のサイズを統一
指定したclassを持つ<img>Nodeを全て同じサイズに調整する。
String1
classを指定
String2
統一タイプを指定 W = 幅を統一 ・ H = 高さを統一 ・ S = 正方形に収める ／ 大文字・小文字で指定可能
Number
サイズを数値で指定
Bool
拡大を許可 true = 許可する ・ false = 許可しない
●必須引数 ●オプション引数(省略可能)
記述例
$imgResize('photo', 'W', 200, false)
$imgResize('photo', 's', 200, true)
動作サンプル
指定した統一タイプでサイズを揃える。
HTML :
<img class="photo1" src="images/pht_1.jpg" width="350" alt="">
<picture>
<source media="(min-width: 575px)" srcset="images/pht_3.jpg">
<img class="photo1" src="images/pht_4.jpg" height="350" alt="">
</picture>
Javascript :
$imgResize('photo1','W',200,true);
$imgResize('photo1','h',200,true);
$imgResize('photo1','S',200,true);
210px正方形の中で、190px正方形に収まるようにサイズ調整して、$alignMid()を併用して枠の中央合わせにする。
160px正方形の中で、140px正方形に収まるようにサイズ調整して、$alignMid()を併用して枠の中央合わせにする。
HTML :
<div id="sample2">
<div class="box2"><img class="photo2" src="images/pht_1.jpg" alt=""></div>
<div class="box2"><img class="photo2" src="images/pht_3.jpg" alt=""></div>
<div class="box2"><img class="photo2" src="images/pht_2.jpg" alt=""></div>
<div class="box2"><img class="photo2" src="images/pht_4.jpg" alt=""></div>
</div>
Javascript :
$imgResize('photo2','S',190,true);
$alignMid('box2');
Javascript :
$imgResize('photo2','S',140,true);
$alignMid('box2');
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。