Question

我正在努力完成两件事：

主要内容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适用于主要内容区域。

这很有效。

我正在尝试用.panels中的图片填充.large。这些图像需要保持纵横比，同时可扩展。我的代码基于on this answer。

这有效，但还没准备好。我必须调整屏幕大小，降低媒体查询，将.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="#" alt="" />
            </div>
            <div class="small">
                <img src="#" 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;}
}

Answer 1

您只需要更改

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

的

$(document).ready( function()

Answer 2

我认为如果你使用jQuery ready（）函数它会起作用。

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

Answer 3

谢谢！我对准备好的事件进行了更改。

我意识到使用图像的宽度和高度引起了这个问题，因为我抓住了，基本上是两个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%"});
    }

但它现在已经解决了。谢谢你的帮助！

如果声明适用于调整大小，还没准备好？

3 个答案: