ステートメントがサイズ変更で機能する場合、準備ができていませんか？ -javascript、jquery、html、css

私は2つのことを達成しようとしています：

1. メインコンテンツdivは、ウィンドウの正確な高さに合わせて動的にサイズ変更されます。私はこの関数でその目標を達成します：

   $(document).on( "ready", function() {
   panelsResize();
   $(window).on( "resize", panelsResize );
   });
   
   function panelsResize() {
   var screenHeight = $(window).height();
   var screenWidth = $(window).width();
   if (screenWidth > 768) {
   $( ".panels" ).css( "height", screenHeight );
   }
   };
   

クラス .panels メインコンテンツエリアに適用されます。

これは膨らみます。

2. 私は埋めようとしています .panels の画像で.large。これらの画像は、スケーラブルでありながらアスペクト比を維持する必要があります。私は自分のコードに基づいています この答えに.

これは機能しますが、準備ができていません。画面のサイズを変更して、表示を切り替えるメディアクエリの下にドロップする必要があります .large 誰にも。上位のメディアクエリにサイズ変更し、表示をブロックに切り替えると、機能は完全に機能します。

何か案は？

関数（およびマークアップ）は次のとおりです。

    $(document).on( "ready", function() {
bgResize();
$(window).on( "resize", bgResize );
});

function bgResize(){
$( ".large" ).each(function() {

var th = $(window).height(),//box height
tw = $(window).width(),//box width
im = $(this).children("img"),//image
ih = im.height(),//inital image height
iw = im.width();//initial image width

if  ( iw < tw ) {
im.css( { "width" : "100%", "height" : "auto" } );
}
else if ( ih < th ) {
im.css( { "height" : "100%", "width" : "auto" } );
}

var nh = im.height(),//new image height
nw = im.width(),//new image width
hd = (nh-th)/2,//half dif img/box height
wd = (nw-tw)/2;//half dif img/box width

if (nh<nw) {
im.css({marginLeft: "-"+wd+"px", marginTop: 0});//offset left
} else {
im.css({marginTop: "-"+hd+"px", marginLeft: 0});//offset top
}

});
};

これはHTMLです：

    <ul id="homePanels">
<li id="cat1" class="panels">
<div class="large">
<img src="/images/#" alt="" />
</div>
<div class="small">
<img src="/images/#" alt="" />
</div>
</li>
</ul>

CSS：

#homePanels {
list-style: none;
margin:0;
padding:0;
overflow: hidden;
}

.large {
width:100%;
height:100%;
}

@media (min-width: 768px) {
.large{display: block;}
.small{display:none}
}

@media (max-width: 768px) {
.small {display:block;}
.large {display:none;}
}

回答：

回答№1は0

jQuery ready（）関数を使えばうまくいくと思います。

$(document).ready(function() {
bgResize();
$(window).on("resize", bgResize );
});

---

回答№2の場合は0

変更するだけです

$(document).on( "ready", function()

ために

$(document).ready( function()

---

回答№3の場合は0

ありがとう！レディイベントに変更を加えました。

画像の幅と私が基本的に2つの0をつかんでいたので、高さが問題を引き起こしていました。それで、私は画像のアスペクト比を知っていたので、それを使って画面サイズ変更時に画像を拡大縮小しました。

    var screenHeight = $(window).height(),
screenWidth = $(window).width(),
aspectRatio = 0.57066014669927,
screenAspectRatio = screenHeight / screenWidth;

if ( screenAspectRatio < aspectRatio ){
$("img").css({"width" : "100%" , "height" : "auto"});
} else if ( screenAspectRatio > aspectRatio ){
$("img").css({"width" : "auto" , "height" : "100%"});
}

しかし、それは今解決されました。あなたの助けに感謝します！

---