如何将div高度设置为自动调整背景大小？
[英]How to set div height to auto-adjust for background size?
问题描述
I am making a responsive site . 
我正在建立一个响应站点。 my problem is How do I get a div to automatically adjust to the size of the background I set for it without setting a specific height (or min-height) for it? 我的问题是如何获取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 Link :- http://jsfiddle.net/rushijogle/5fray/2/ 演示链接： -http : //jsfiddle.net/rushijogle/5fray/2/
Thanx in Advance :) 提前感谢:)
3 个解决方案
解决方案1
0 2013-05-22 12:11:52
Working demo: http://jsfiddle.net/gKQ7e/ 工作演示： http : //jsfiddle.net/gKQ7e/
This will stretch and keep your div to the top and bottom of the browser as its resized. 调整大小后，这将拉伸并使div保持在浏览器的顶部和底部。
Remove height: 540px 移除height: 540px
Add: 加：
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;
}
解决方案2
0 2013-05-22 12:24:16
Actually, There is no way to auto adjust div height to auto-adjust for background size using css. 实际上，没有办法使用CSS自动调整div高度以自动调整背景大小。
But you can use javascript to do this(after the background image has been loaded). 但是，您可以使用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>
Anyway, there is still an inefficiency way to do this without javascript, by including the image under an img tag with the visibility set to hidden: 无论如何，通过将图像包含在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>
Best Regards:) 最好的祝福：）
解决方案3
0 2014-06-13 21:45:17
I have been dealing with this issue for a while and decided to write a jquery plugin to solve this problem. 我已经处理了一段时间，并决定编写一个jquery插件来解决此问题。 This plugin will find all the elements with class "show-bg" (or you can pass it your own selector) and calculate their background image dimensions. 该插件将找到所有带有“ show-bg”类的元素（或者您可以将其传递给您自己的选择器）并计算其背景图像尺寸。 all you have to do is include this code, mark the desired elements with class="show-bg" and run: 您所要做的就是包括以下代码，用class =“ show-bg”标记所需的元素，然后运行：
$(document).heightFromBG();
Enjoy! 请享用！
https://bitbucket.org/tomeralmog/jquery.heightfrombg https://bitbucket.org/tomeralmog/jquery.heightfrombg
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.