ヘルメスの友のブログ

リサイズしないとWebページに画像が表示されない

画面がリサイズされたらそれに応じて画像のサイズも変更されるように、以下のように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    //$("#gNavi").show();    //$("#navToggle").hide();    $("#slideGallary").css({'width':'80%'});    $("#elements").css({'width':'80%'});    } else {    //スマホ    //$("#gNavi").hide();    //$("#navToggle").show();    $("#slideGallary").css({'width':'100%'});    $("#elements").css({'width':'100%'});    }…また、初期表示時用にcssには以下のように定義しておいた。​​  #pic1 {    display: block;}​​他の画像はdisplay：noneと定義。しかし、この状態でサイトにアクセスすると画像が表示されず。原因は、初期表示時の画像の高さをきちんと定義していなかったから。。なので、functionの中で   imgHeight = parseInt($("#slideGallary").width() *2/3);   $("#slideGallary").height(imgHeight);   $(".picLib").height(imgHeight);​を定義し、そのfunctionの中でresizeをかけるようにしたら無事解決。