缩放图像以填充父容器

我需要一个脚本来缩放图像以填充父容器并保持宽高比（加上在ie8中工作），因此我创建了下面的代码，它工作正常，但事情是有时该代码是建立在图像的边框间隙，当你刷新页面有时消失或再现......我用这个代码，更多的div的副本...缩放图像以填充父容器

它是这样的：

SCRIPT：

$(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>

来源

2015-01-17 Alin

为什么不使用'background-image'和'background-size：cover'结合？ – ckuijjer

@ckuijjer，这是因为我需要它在ie8中工作... – Alin

你应该永远记住，以确保你开始与他们合作之前，所有图像都满载。

快速的解决方案是简单地触发“调整”事件之后的所有资源都加载：

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

您还可能引发“调整大小”，当只有你的形象将被加载：

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

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

来源

2015-01-17 18:38:00

这是一件永远不会忘记的事情......但仍然没有解决我的问题:)虽然提醒虽然 – Alin

缩放图像以填充父容器

回答

相关问题