Question

js获取背景图片宽高比后根据浏览器宽度动态赋值div.style.height

div的width:100%，background-size:100% auto。div宽度这样是根据浏览器窗口宽度自适应，div高度要js赋值。js获取背景图片长宽，计算出宽高比。div实时宽度*背景图的长宽比=div高度。

Answer 1

代码大致如下供参考：

var   image=new   Image();
image.src=//你的背景图片的src;
var divelement = document.getElementById(你的div的id);
divelement.style.height=(image.height*divelement.offsetWidth)/image.width + "px";

几个需要注意的地方是image.src=xxx后需要等待直到图片下载完成。但是如果这个脚本是在你的div已经初始化好之后调用的话，那么图片已经被下载过了，所以直接进行后面的就好。另外以style.height来设置高度的话后面需要加单位，比如px

追问

读不出图片的宽高啊，方便Q么

追答

图片加载完成后使用是一定能读出宽高的。
我说过image.src=xxx后需要等待直到图片下载完成，可以使用image.onload来实现，参考3楼的做法。也可以settimeout定期检测image的状态看看是否完成。总之要等到图片加载完成后再进行后面的

Answer 2

【注意】因为百度知道这几天的高亮显示不正常，下面代码中前面的空格都是【全角】，你复制粘贴之后自己用编辑器查找/替换全部吧。

<style type="text/css">
#div {
　　width: 100%;
　　background: url("bg.jpg") no-repeat;
　　background-size: 100% auto;
　　border: 1px solid #f00;
}
</style>

<script type="text/javascript">
function resizeDiv() {
　　// 获取 div 元素
　　var div = document.getElementById("div");
　　// 兼容 style
　　var style = div.currentStyle || getComputedStyle(div, false);
　　// 从 url("/path/to/image.jpg") 中获取图像地址
　　var img_src = style.backgroundImage
　　　　.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
　
　　// 创建新图像
　　var img = new Image();
　　// 图像加载
　　img.onload = function() {
　　　　// 获取宽高比
　　　　var ratio = img.width / img.height;
　　　　// 根据比例设置 div 高度
　　　　div.style.height = parseInt(div.offsetWidth / ratio) + "px";
　　　　img = null;
　　};
　　img.src = img_src;
};
　
// 页面加载，设置 div 高度
window.onload = function() {
　　resizeDiv();
};
　
// 窗口变化，设置 div 高度
window.onresize = function() {
　　resizeDiv();
};
</script>

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

Answer 3

用image的onload来触发嘛：
image.onload=function(){
div.style.height=(this.height*div.offsetWidth)/this.width + "px";
}
这个bd的智能检测还真是垃圾货，竟然说我上面的内容没有意义，额……
这个bd的智能检测还真是垃圾货，竟然说我上面的内容没有意义，额……

Answer 4

new Image(); 我粗略一看代码不错。
但仔细一看
这是html5增加的image对象
在ie9以上浏览器或其他浏览器可以使用
offsetWidth支持也不同
最重要的是少了加载完成事件onload 图片没加载完怎么用
后面不加px也是可以的事实证明一切 但最好加上