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

2016.07.29 2019.05.10js
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;
    }
}