LotusNotesな日々IBM社のLotusNotesに関係する何かを日々語ってるようなきがしないでもないブログです。 

スポンサーサイト

   ↑  --/--/-- (--)  カテゴリー: スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

(記事編集) http://mesosune.blog123.fc2.com/?overture" target="_new

--/--/-- | Comment (-) | HOME | ↑ ページ先頭へ |

【Web】サイズにあわせて画像サイズを自動で変更する

   ↑  2007/11/09 (金)  カテゴリー: JavaScript/CSS
サイズにあわせて画像サイズを自動で変更するScript。

1.画面サイズで測っていますが,画面サイズ以外を指定しても使用できます。
2.画像をひとつだけ指定していますが,複数画像を呼び出すこともできます。
3.getElementByIdを使用しているので基本的にIE5.0~だけとおもってください

<body onLoad="imgResize()">
<img src="./XXXXXX.jpg" id="image1" onClick="window.open('./XXXXXX.jpg','imgOriginalSize')">
function imgResize(){

resizeRate = 1.0; // 画面サイズに対する画像サイズの比率
margin = 12; // 画像表示領域用の余白

// 変数の定義
imgWidth = document.getElementById('image1').width; // 画像の幅
imgHeight = document.getElementById('image1').height; // 画像の高さ
winWidth = Math.floor(document.body.clientWidth * resizeRate - margin * 2); // 画像表示領域の幅
winHeight = Math.floor(document.body.clientHeight * resizeRate - margin * 2); // 画像表示領域の高さ
widthRate = imgWidth / winWidth; // 画像サイズと画像表示領域のサイズの比率 (幅)
heightRate = imgHeight / winHeight; // 画像サイズと画像表示領域のサイズの比率 (高さ)

if (widthRate >= 1 && heightRate >= 1){
// 画像のwidth、height共に画面に収まらない場合
if (widthRate > heightRate){
// 画像のwidthの比率の方が大きい場合
// widthに合わせてリサイズ
document.getElementById('image1').style.width = winWidth;
document.getElementById('image1').style.height = Math.floor(imgHeight / widthRate);
} else {
// 画像のheightの比率の方が大きい場合
// heightに合わせてリサイズ
document.getElementById('image1').style.width = Math.floor(imgWidth / heightRate);
document.getElementById('image1').style.height = winHeight;
}
} else if (widthRate >= 1 && heightRate < 1){
// 画像のwidthのみ画面に収まらない場合
document.getElementById('image1').style.width = winWidth;
document.getElementById('image1').style.height = Math.floor(imgHeight / widthRate);
} else if (widthRate < 1 && heightRate >= 1){
// 画像のheightのみ画面に収まらない場合
document.getElementById('image1').style.width = Math.floor(imgWidth / heightRate);
document.getElementById('image1').style.height = winHeight;
} else {
// 画像のwidht、heightともに画面に収まる場合
// 必要であれば処理を記述
}
}
window.onresize = imgResize;
スポンサーサイト

(記事編集) http://mesosune.blog123.fc2.com/blog-entry-13.html

2007/11/09 | Comment (0) | Trackback (0) | HOME | ↑ ページ先頭へ |

Comment

コメントを投稿する 記事: 【Web】サイズにあわせて画像サイズを自動で変更する

お気軽にコメントをぞうぞ。
非公開 (管理人のみ閲覧可能なコメント) にしたい場合には、ロック にチェックを入れてください。

  任意 : 後から修正や削除ができます。
  非公開コメントとして投稿する。(管理人にのみ公開)
 

Trackback

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。