縮放圖像以填充父容器

我需要一個腳本來縮放圖像以填充父容器並保持寬高比（加上在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

縮放圖像以填充父容器

回答

相關問題