jquery - 缩放图像以填充父容器

Question

我需要一个脚本来缩放图像以填充父容器并保持宽高比(加上在 ie8 中工作)，因此我创建了下面的代码并且它工作正常但问题是有时该代码正在创建边框图像上的间隙，当您刷新页面时，它有时会消失或重新出现...我使用此代码的副本来获得更多 div...

它是这样的:

脚本:

$(window).bind('resize', function () {
    var container_height = $('#homepage').height();
    var container_width = $('#homepage').width();
    var image_height = $('#homepage img').height();
    var image_width = $('#homepage img').width();

    if (container_width > image_width) {
        $('#homepage img').css({
            'width': '100%',
                'height': 'auto'
        });
    } else if (container_height > image_height) {
        $('#homepage img').css({
            'width': 'auto',
                'height': '100%'
        });
    };
});
$(window).trigger("resize");

CSS:

#homepage{
    width:100%;
    height:850px;
    overflow:hidden;
    position:relative;
    display:table;
    margin:0;
    padding:0;
}
#homepage img{
    width:auto;
    height:100%;
    position:absolute;
    bottom:0;
    right:0;
    margin:0;
    padding:0;
}

最后是一些 HMTL:

<div id="homepage">
    <img src="img/source.jpg" />
</div>

Answer 1

在开始使用它们之前，您应该始终记住确保所有图像都已完全加载。

快速解决方案是在加载所有资源后简单地触发 'resize' 事件:

$( window ).load(function() {
    $(this).trigger("resize"); 
});

你也可以触发“调整大小”，当只加载你的图像时:

$('#homepage img').on('load', function(){
    $(window).trigger("resize");
});

但是你应该记住“IE 图像缓存问题”: https://stackoverflow.com/a/12000119