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>

DEMO链接： - http://jsfiddle.net/rushijogle/5fray/2/

Thanx in Advance :)

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>

无论如何，没有javascript，仍然有一种效率低下的方法，通过将图像包含在img标记下，并将可见性设置为隐藏：

<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插件来解决这个问题。这个插件将找到所有带有类＆＃34; show-bg＆＃34;的元素。（或者你可以传递它自己的选择器）并计算它们的背景图像尺寸。您所要做的就是包含此代码，使用class =＆＃34; show-bg＆＃34;标记所需的元素。并运行：

 $(document).heightFromBG();

享受！

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

如何设置div高度以自动调整背景大小？

3 个答案:

最诚挚的问候：）