【jQuery】スマホサイトの背景画像を画面横幅に合わせてリサイズするサンプルコード

スマホサイトで画面の向きが変わる時に背景画像と画面の向きが変わった事によりリサイズされた親要素の大きさのズレを解消する処理を自作したのでメモ。

【仕様】
・画面の向き変更後に画面横幅を基準に、親要素と背景画像をリサイズする。

bg_resize

⇒デモ(スマホ実機で要確認)

【JS】

$(function(){
	var classBgResize = function(block_pass, sw) {
		var block_cnt = block_pass.length;
		var arr_img = new Array(block_cnt);
		var bg_img = new Array(block_cnt);
		var bg_img_name = new Array(block_cnt);
		
		for(var i=0 ; i<=(block_cnt-1) ; i++){
			bg_img[i] = block_pass.eq(i).css("background-image");
			bg_img_name[i] = bg_img[i].substring(4, bg_img[i].length - 1);
		
			arr_img[i] = new Image();
			arr_img[i].src = bg_img_name[i];
		}
		
		arr_img[(i-1)].onload = function(){
			var iw = new Array(block_cnt);
			var ih = new Array(block_cnt);
			var bw = new Array(block_cnt);
			var bh = new Array(block_cnt);
			var arr_h = new Array(block_cnt);
			var arr_w = new Array(block_cnt);
	
			var n = 0;
			$.each(arr_img, function(){
			
				iw[n] = arr_img[n].width;
				ih[n] = arr_img[n].height;
				bw[n] = block_pass.eq(n).width();
				bh[n] = block_pass.eq(n).height();
				
				n++;
			});
			$(window).resize((function(){
				resizeAction(block_pass, iw, ih, bw, bh, arr_h, arr_w, sw);
			}));
		}
		
		// リサイズ処理
		function resizeAction(block_pass, iw, ih, bw, bh, arr_h, arr_w, sw){	
			var cw  = $(this).width();
			
			for(var s=0 ; s<=(bw.length-1) ; s++){
				if(sw == cw){
					//alert("スタート時と同じ向き");
					arr_h[s] = bw[s]/iw[s]*ih[s];
					
					block_pass.eq(s).css({backgroundSize: "100%"});
					block_pass.eq(s).css("width", bw[s]+"px");
					block_pass.eq(s).css("height", arr_h[s]+"px");
				
				}else{
					//alert("スタート時と違う向き");
					arr_w[s] = (cw)*(bw[s]/sw);
					arr_h[s] = (cw/iw[s]*ih[s])*(bw[s]/sw);
					
					block_pass.eq(s).css({backgroundSize: "100%"});
					block_pass.eq(s).css("width", arr_w[s]+"px");
					block_pass.eq(s).css("height", arr_h[s]+"px");
				}
			}
		}
	}
	
	// クラス名と画面横幅初期値を代入
	var block_pass = $(".bg_resize");
	var sw = $(this).width();
	
	new classBgResize(block_pass, sw);
});

【HTML】

<div id="conteiner"> 
	<p class="aaa bg_resize">bg_resize_aaa</p>
	<p class="bbb bg_resize">bg_resize_bbb</p>
	<p class="ccc">no_resize_ccc</p>
</div>

【CSS】

#conteiner{
	width: 100%;
	margin: 0 auto;
}

.img_chenge img{
	width: 100%;
}

.aaa{
	width: 100%;
	background: url(../img/s_test_1.jpg) no-repeat; 
}

.bbb{
	width: 50%;
	background: url(../img/s_test_2.jpg) no-repeat; 
}

.ccc{
	width: 50%;
	background: url(../img/s_test_1.jpg) no-repeat; 
}

⇒デモ(スマホ実機で要確認)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>