PR
ヘルメスの友
ヘルメスの友のブログへようこそ
カレンダー
2025.11
2025.10
2025.09
2025.10
2025.09
2025.08
2025.07
2025.07
コメント新着
コメントに書き込みはありません。
キーワードサーチ
▼キーワード検索
2018.03.24
カテゴリ： JavaScript
画面がリサイズされたらそれに応じて画像のサイズも変更されるように、以下のようにjs（jquery）を書いていた。
$(window).resize(
function(){
imgHeight = parseInt($("#slideGallary").width() *2/3);
$("#slideGallary").height(imgHeight);
$(".picLib").height(imgHeight);
var gnaviWidth = parseInt($("#container").width());
if (751 < gnaviWidth) {
//PC
//$("#navToggle").hide();
$("#slideGallary").css({'width':'80%'});
$("#elements").css({'width':'80%'});
} else {
//スマホ
//$("#gNavi").hide();
//$("#navToggle").show();
$("#slideGallary").css({'width':'100%'});
$("#elements").css({'width':'100%'});
}
…
#pic1 {
display: block;
} 他の画像はdisplay：noneと定義。
しかし、この状態でサイトにアクセスすると画像が表示されず。
なので、functionの中で
imgHeight = parseInt($("#slideGallary").width() *2/3);
$("#slideGallary").height(imgHeight);
$(".picLib").height(imgHeight);
を定義し、そのfunctionの中でresizeをかけるようにしたら無事解決。
function(){
imgHeight = parseInt($("#slideGallary").width() *2/3);
$("#slideGallary").height(imgHeight);
$(".picLib").height(imgHeight);
var gnaviWidth = parseInt($("#container").width());
if (751 < gnaviWidth) {
//PC
//$("#navToggle").hide();
$("#slideGallary").css({'width':'80%'});
$("#elements").css({'width':'80%'});
} else {
//スマホ
//$("#gNavi").hide();
//$("#navToggle").show();
$("#slideGallary").css({'width':'100%'});
$("#elements").css({'width':'100%'});
}
…
#pic1 {
display: block;
} 他の画像はdisplay：noneと定義。
しかし、この状態でサイトにアクセスすると画像が表示されず。
なので、functionの中で
imgHeight = parseInt($("#slideGallary").width() *2/3);
$("#slideGallary").height(imgHeight);
$(".picLib").height(imgHeight);
を定義し、そのfunctionの中でresizeをかけるようにしたら無事解決。
お気に入りの記事を「いいね！」で応援しよう
【毎日開催】
15記事にいいね！で1ポイント
© Rakuten Group, Inc.
