スポンサーサイト

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

JavaScriptでサムネイル画像のサイズを変更させる

前回紹介したように、サムネイル画像のサイズ変更を行うスクリプトを紹介します。

使用例としては、ブログのテンプレートを変えた時に、サムネイル画像が大きすぎて枠から出てしまう場合などに使用します。

変更箇所は、「var limitwd=350; // 画像の最大幅 この値を変更する」という部分の数値を変更します。


このスクリプトが行っている動作について簡単に説明します。
imgタグをすべて取得して、画像の横幅を取得しています。
自分で指定した横幅より大きい画像は、指定した横幅に変更され縦幅は比率を維持した状態で変更されます。


※注意
ブログを月別表示にしたりすると、1ページ当たりの記事の量が増えてしまいます。
画像などをたくさん掲載していると、処理に時間がかかる場合があります。
画像の掲載においては、やはり適切なサイズでサムネイルを作ることが推奨されます。


function ChangeimgSize() {
	var i;
	var img;
	var limitwd=350;	// 画像の最大幅 この値を変更する
	var tags = document.getElementsByTagName("img");

	if(!tags)return;
	
	for(i=0;ilimitwd) {
			tags[i].height=(img.height)/(img.width/limitwd);	// 縦横比をあわせる。
			tags[i].width=limitwd;	// 最大幅に変更
		}
	}
}

今回のスクリプトは、「http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1039614910」から転載させていただきました。

テーマ : コンピュータ
ジャンル : コンピュータ

コメントの投稿

非公開コメント

プロフィール

agpm

Author:agpm
最近は、ゲーム中心にやっています。
アニメなども見てますが、そこまで詳しくはないです<(_ _)>
更新は気分しだいで、頻度にはかなり差があります

リンクフリーなのでどんどんして頂けると管理人はうれしいです
相互リンクでもOK


連絡こちら↓
メールフォームはここ

PCのスペック公開

リンク
カレンダー
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
最新コメント
月別アーカイブ
カテゴリ
RSSリンクの表示
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。