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