16:9,4:3判別付き、画像サイズ取得スクリプト

Sponsored Link

動作概要

HTML上の画像にサイズを刻印します。

  • 「16:9」サイズなら青色枠で表示
  • 「4:3」なら黒色枠で表示
  • 上記以外は赤色枠で表示

ある程度誤差をもった判定にしてありますが、コメント欄のとおりに条件式を書きかえれば曖昧な判断させることもできます。全体幅や画像幅が固定なら厳密式、レスポンシブウェブデザインなら誤差を持たせた方がよいです。(「曖昧」=小数点以下の誤差を認定)

jQuery

$(window).load(function(){
	//画像サイズ取得実行
	//==================================================
	$('img').each(function(){//clickイベントならクリックした画像ひとつのみに実行、eachなら全てに実行。
	var msg=$(this).width()+'x'+$(this).height();
	$(this).wrap('<div style="position:relative;"></div>');
	var div=$('<div class="imgsize">').text(msg)//<div>要素にテキストをセットする命令を変数に代入
	.css('position','absolute')//その<div>要素にCSSをセット
	.css('top','0px')
	.css('left','0px')
	.css('width','auto')
	.css('color','white')
	.css('background-color','red')
	.css('font-weight','bold')
	.css('font-size','14px')
	.css('opacity','0.9')
	.css('padding','2px');
	$(this).after(div);//指定HTML(ここでは変数divの中身)を各要素(ここではthis)の後ろに追加。
	var magWidth=$(this).width();
	var magHeight=$(this).height();
	var mag=magWidth/magHeight;
	console.log(mag);
	if(mag==1.7777777777777777){//厳密「mag==1.7777777777777777」、曖昧「mag>1.769 && mag<1.7838」
		$(this).next().css('background-color','blue');
	} else if(mag==1.3333333333333333){//厳密「mag==1.3333333333333333」、曖昧「mag>1.329 && mag<1.334」
		$(this).next().css('background-color','black');
	}
	});
})

サンプルページは以下にあります。


[browser-shot url=”http://osumituki.com/img-size.html” width=”100″]

HTML上の画像にサイズを刻印します。


補足記事


[browser-shot url=”http://osumituki.com/web-design/82.html” width=”100″]
Webデザインで大事な数字 

画像の縦横比で一般的な「4:3」と「16:9」で、動画のサイズやモニタサイズで採用されています。この比率で縦横サイズが整数になるものが使いやすいとされています。



わずか数行のjQueryで多段階層プルダウンの開閉を行います。
階層が開く際のアクションにfont-awesomeアイコンを使うことで、自動的にアニメーションするようになっています。


Sponsored Link

最新記事はトップページで!

京都発・地方が盛り上がるグルメや観光に撮影ロケ地の話題を提供!


購読するならRSSをご利用ください!

RSSはこちらをご利用ください。


マスコミ各社様の記事使用規約についてはこちらをご覧ください。

当ブログでは掲示板やSNSなど他メディアでURLや記事を紹介することはございませんので、掲示板などで記事を紹介されていても一切無関係です。誤解なきようお願いいたします。
当ブログで転載しているTweetはTwitter社の規約(2013/10)に準じた形式(API利用)によって許可された範囲で行われています。また、Tweet内容の所有権はTwitter社の規約によりTweet元のアカウント所有者にあります。そのため、当ブログでその所有権を主張するものではありません。Tweet内容については責任は負いませんので予めご了承ください。