PCとスマホの画像切り替え

PCとスマホの画像切り替え

レスポンシブサイト構築で、PCとスマホで画像の縦横比率が異なる場合、PC横100%画像をスマホで表示すると地平線になってしまいます。そんな時は、下記スクリプトで画像を切り替え!

JSファイル

$(function(){
	
	changeImg();
	
	function changeImg() {

		var w = $(window).width();
		var break_point = 640;

		$("img[data-sp]").each(function(){

			if( w <= break_point ){
				// スマホ
				$(this).attr("src", $(this).data("sp"));
			}else{
				// PC
				$(this).attr("src", $(this).data("pc"));
			}

		});
                
	}
	
	$(window).resize(function() {

		changeImg();
	});
	
});

HTMLファイル

<img src="/img/sample.jpg" data-pc="/img/sample.jpg" data-sp="/img/sp/sample.jpg" alt="" />