如何將div高度設置為自動調整背景大小？

Question

我正在建立一個響應站點。 我的問題是如何獲取div以自動調整為其設置的背景大小，而無需為其設置特定的高度（或最小高度）？

<style>
#master_head{
width:99%;
min-width:640px;
border:1px solid red;
min-height:50px;
background: url(http://nokiaindiacontest.com/ashalcm/images/nokia-asha-Width-banner.png) no-repeat top;
background-size: contain;   
height:540px;
}
</style>

<div id="master_head"> </div>

演示鏈接： -http : //jsfiddle.net/rushijogle/5fray/2/

提前感謝:)

Answer 1

工作演示： http : //jsfiddle.net/gKQ7e/

調整大小后，這將拉伸並使div保持在瀏覽器的頂部和底部。

移除height: 540px

加：
position: fixed;
top: 0;
bottom: 0;

#master_head{
    width:99%;
    min-width:320px;
    border:1px solid red;
    min-height:50px;
    background: url(http://nokiaindiacontest.com/ashalcm/images/nokia-asha-Width-banner.png) no-repeat top;
    background-size: contain;   
    position: fixed;
    top: 0;
    bottom: 0;
}

Answer 2

實際上，沒有辦法使用CSS自動調整div高度以自動調整背景大小。

但是，您可以使用javascript（在加載背景圖片之后）執行此操作。

<!DOCTYPE html>
<html>
<body>
</body>

<div id='hello' style="background:url(http://nokiaindiacontest.com/ashalcm/images/nokia-asha-Width-banner.png);">
</div>
<script type="text/javascript" charset="utf-8">
window.onload = function() {

    var imageSrc = document
    .getElementById('hello')
    .style
    .backgroundImage
    .replace(/url\((['"])?(.*?)\1\)/gi, '$2')
    .split(',')[0];

    var image = new Image();
    image.src = imageSrc;

    var width = image.width,
    height = image.height;

    document.getElementById('hello').style.height = height+'px';
    document.getElementById('hello').style.width= width+'px';
}
</script>
</html>

無論如何，通過將圖像包含在img標記下且可見性設置為隱藏的情況下，仍然可以通過不帶JavaScript的方式來實現此目的，這是一種效率低下的方法：

<div id='hello' style="background:url(http://nokiaindiacontest.com/ashalcm/images/nokia-asha-Width-banner.png);">
    <img src="http://nokiaindiacontest.com/ashalcm/images/nokia-asha-Width-banner.png" style="visibility:hidden"/>
</div>

最好的祝福：）

Answer 3

我已經處理了一段時間，並決定編寫一個jquery插件來解決此問題。 該插件將找到所有帶有“ show-bg”類的元素（或者您可以將其傳遞給您自己的選擇器）並計算其背景圖像尺寸。 您所要做的就是包括以下代碼，用class =“ show-bg”標記所需的元素，然后運行：

 $(document).heightFromBG();

請享用！

https://bitbucket.org/tomeralmog/jquery.heightfrombg

如何將div高度設置為自動調整背景大小？

問題描述

3 個解決方案

解決方案1
0 2013-05-22 12:11:52

解決方案2
0 2013-05-22 12:24:16

最好的祝福：）

解決方案3
0 2014-06-13 21:45:17

如何將div高度設置為自動調整背景大小？

問題描述

3 個解決方案

解決方案1 0 2013-05-22 12:11:52

解決方案2 0 2013-05-22 12:24:16

最好的祝福：）

解決方案3 0 2014-06-13 21:45:17

解決方案1
0 2013-05-22 12:11:52

解決方案2
0 2013-05-22 12:24:16

解決方案3
0 2014-06-13 21:45:17