0

我正在制作一个响应式网站。我的问题是如何让 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/

提前感谢:)

4

3 回答 3

0

我一直在处理这个问题，并决定编写一个 jquery 插件来解决这个问题。这个插件将找到所有带有“show-bg”类的元素（或者你可以传递你自己的选择器）并计算它们的背景图像尺寸。您所要做的就是包含此代码，用 class="show-bg" 标记所需的元素并运行：

 $(document).heightFromBG();

享受！

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

于 2014-06-13T21:45:17.360 回答
0

实际上，没有办法使用 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>

此致：）

于 2013-05-22T12:24:16.910 回答
0

工作演示：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;
}
于 2013-05-22T12:11:52.107 回答