最大画像サイズ指定のテスト

サイズ制限指定あり 元サイズ[ 幅:1116 高さ:971 ]

test1

サイズ制限指定あり 元サイズ[ 幅:1115 高さ:936 ]

test2

サイズ制限指定あり 元サイズ[ 幅:233 高さ:189 ] ※1 画像の本来のサイズが幅300以下

test3

サイズ制限指定あり 元サイズ[ 幅:233 高さ:189 ] ※1 画像の本来のサイズが幅300以下 ※2 html上で幅・高さの指定あり

test4

サイズ制限指定あり 元サイズ[ 幅:1115 高さ:936 ] ※1 html上で幅の指定あり

test5

サイズ制限指定あり 元サイズ[ 幅:1116 高さ:971 ] ※1 html上で高さの指定あり

test6

サイズ制限指定なし 元サイズ[ 幅:808 高さ:711 ]

test7

■ 使い方

①head要素内で js を読み込む。
<script type="text/javascript" src="imageSizeFix.js"></script>
②最大サイズを指定したいimg要素に class="sizefix" を指定する。
<img src="sample.png" alt="sample" class="sizefix" />
③JSファイルを開き下記箇所の最大幅指定をサイトに合わせて編集する
//-----------------------------------------
// 設定値
//-----------------------------------------
maxWidth : 300,←ここの数字を編集
dynamicSwitch : false,
useClListener : false,
targetClass : 'sizefix',
④画像の最大幅をhtml内のwidthから取得する場合(各画像毎に最大幅の指定が可能)
//-----------------------------------------
// 設定値
//-----------------------------------------
maxWidth : 300,
dynamicSwitch : false,←ここをtrueに編集
useClListener : false,
targetClass : 'sizefix',
⑤このscriptをDOMContentLoadedイベントで実行する場合
//-----------------------------------------
// 設定値
//-----------------------------------------
maxWidth : 300,
dynamicSwitch : false,
useClListener : false,←ここをtrueに編集
targetClass : 'sizefix',
本ページでは、js内での最大幅を 300 に指定している。