slide画像を画面サイズで横や縦100%にjsで切り替えるん!

例えばPCのような画面ではslide画像を縦100%目一杯
スマフォで閲覧した場合に同じ比率の画像で表示しようとすると
縦100%にしてしまうと首長族になってしまいますよね
そんなときのきりかえメモ
例として750pxを境界〇〇の壁的に
751px以上は縦100%
750px以下は横100%に切り替えます。
if (jQuery(window).width() < 750) { //ウィンドウサイズが751pxより小さい場合の処理を記載する //jsファイル読み込みや、別のslide画像のjsを書いたり } else { //ウィンドウサイズが751pxより大きい場合の処理を記載する。 //縦100%なのですがheaderやfooterがある場合はその分を画面サイズからひいておきます。 $(function(){ //top windowの高さを取得して、header+footerの115pxを引いておく var h = $(window).height() - 115; //contentsにheightを追加 $('.slider_item').css('height',''+h+'px'); }); //751pxより大きい場合のslideの処理とか記載 }
合わせてcssはメディアクエリで例えば
.slider { width: auto; height: 100%; } .slider img{ width: auto; height: 100%; } @media screen and (max-width: 750px) { .slider { width: 100%; height: auto; } .slider img{ width: 100%; height: auto; } }
この記事を気に入ったら
いいね!&フォローしよう最新情報をお届けします