https://www.cosme.net/js/lib/jquery-img-rspsv.js?5e759d561f7e8b357f3a343ef9912b4ab3291691

1/*
2	* Created:     2014-12-05 by fujinamit
3	* Last update: 2015-05-23 by ishdiat
4*/
5$(function(){
6
7	// 値からpxなどを除いて数値に変換するメソッド
8	String.prototype.parseNum = function(){
9		return this.replace(/[^0-9\-\.]/g, '') - 0;
10	}
11
12	// クラス名から先頭のドットを取り除くメソッド
13	String.prototype.parseClass = function(){
14		return this.replace(/^\./, '');
15	}
16});
17
18
19/*
20	* レスポンシブ＆トリム画像
21	* Created:     2014-12-12 by fujinamit
22	* Last update: 2015-03-19 by fujinamit
23
24	タグの common.js の2015-04-07時点そのまま
25
26	<p class="jq-img-rspsv"><img ... ></p> のようにする。
27	pはCSSでwidth/heightを指定しておく
28
29	要素を追加した時は↓でイベントを発生させる
30	$(window).trigger('updateResponsiveIMG');
31*/
32$(function(){
33	var responsive_name = {
34		container: '.jq-img-rspsv',
35	    noextend: '.jq-img-rspsv-noextend',
36		state_initialize: '.is-initialized',
37		state_loaded: '.is-loaded',
38		event_update: 'updateResponsiveIMG',
39	}
40	responsive_name.noextend_nd = responsive_name.noextend.parseClass();
41	responsive_name.state_loaded_nd = responsive_name.state_loaded.parseClass();
42	responsive_name.state_initialize_nd = responsive_name.state_initialize.parseClass();
43
44	var initImage = function(){
45		$(responsive_name.container + ':not(' + responsive_name.state_initialize + ')').each(function(){
46			var container = $(this);
47			var img_element = container.find('img');
48			var img_info = {
49				src: false,
50				width: false,
51				height: false,
52			}
53			container.addClass(responsive_name.state_initialize_nd);
54
55			var noextend = false;
56			if (container.hasClass(responsive_name.noextend_nd)){ noextend = true; }
57
58			// 画像読み込み＆サイズ取得
59			var loadImage = function(){
60				var buffer = new Image();
61				buffer.onload = function(){
62					if(!this.src.match(/^data:/) || navigator.userAgent.match(/msie\s[0-9]+\.\d*/i)){
63						img_info.width = this.width;
64						img_info.height = this.height;
65					}else{
66						EXIF.getData(this,function(){
67							var orientation = EXIF.getTag(this,'Orientation');
68							if(!navigator.userAgent.match(/iPhone|iPad|iPod/i)){
69								var mpImg = new MegaPixImage(buffer);
70								mpImg.render(img_element[0], {orientation: orientation});
71							}
72							if(1 <= orientation && orientation <= 4){
73								img_info.width = this.width;
74								img_info.height = this.height;
75							}else{
76								img_info.width = this.height;
77								img_info.height = this.width;
78							}
79						});
80					}
81					setImageSize();
82					delete buffer; // メモリ開放
83					container.addClass(responsive_name.state_loaded_nd);
84				};
85				buffer.src = img_info.src;
86			}
87
88			// サイズ計算
89			var setImageSize = function(){
90				if (! img_info.src || ! img_info.width || ! img_info.height){ return; }
91
92				img_element.removeAttr('style');
93
94				var container_width = container.css('width').parseNum(); // parseNumはcommon.jaのメソッド
95				var container_height = container.css('height').parseNum();
96
97				var set_width;
98				var set_height;
99				var set_left;
100				var set_top;
101
102				// 横長（画像自体ではなく表示枠に対しての縦横比率が）
103				if (img_info.width / img_info.height > container_width / container_height){
104				//表示枠に対して画像の高さが満たない場合
105				if (noextend && img_info.height < container_height){
106					set_width = img_info.width;
107					set_height = img_info.height;
108					set_left = (container_width - set_width) / 2;
109					set_top = (container_height - set_height) / 2;
110				}else{
111					set_width = img_info.width * (container_height / img_info.height);
112					set_height = container_height;
113					set_left = (container_width - set_width) / 2;
114					set_top = 0;
115				}
116				} else {// 縦長
117				//表示枠に対して画像の幅が満たない場合
118				if (noextend && img_info.width < container_width){
119					set_width = img_info.width;
120					set_height = img_info.height;
121					set_left = (container_width - set_width) / 2;
122					set_top = (container_height - set_height) / 2;
123				}else{
124					set_width = container_width;
125					set_height = img_info.height * (container_width / img_info.width);
126					set_left = 0;
127					set_top = (container_height - set_height) / 2;
128				}
129			}
130
131				img_element.css({
132					'width': set_width + 'px',
133					'height': set_height + 'px',
134					'margin-left': set_left + 'px',
135					'margin-top': set_top + 'px',
136				});
137			}
138
139			// 画面リサイズ（回転）時
140			$(window).bind('resize', setImageSize);
141
142			// srcが存在すれば初期化
143			var src = img_element.attr('src');
144			if (src && src != ''){
145				img_info.src = src;
146				loadImage();
147			}
148		});
149	}
150

151	// 画像高さの後に実行したいので同じくloadを使っている
152	$(window).bind('load ' + responsive_name.event_update, initImage);
153});