レスポンシブサイト構築で、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="" />