如何将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