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;
}
}
