js获取背景图片宽高比后根据浏览器宽度动态赋值div.style.height
div的width:100%，background-size:100% auto。div宽度这样是根据浏览器窗口宽度自适应，div高度要js赋值。js获取背景图片长宽，计算出宽高比。div实时宽度*背景图的长宽比=div高度。
代码大致如下供参考：
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的状态看看是否完成。总之要等到图片加载完成后再进行后面的
温馨提示：内容为网友见解，仅供参考
第1个回答 2013-04-29
【注意】因为百度知道这几天的高亮显示不正常，下面代码中前面的空格都是【全角】，你复制粘贴之后自己用编辑器查找/替换全部吧。
#div {
width: 100%;
background: url("bg.jpg") no-repeat;
background-size: 100% auto;
border: 1px solid #f00;
}
</style>
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>
第2个回答 2013-04-30
用image的onload来触发嘛：
image.onload=function(){
div.style.height=(this.height*div.offsetWidth)/this.width + "px";
}
这个bd的智能检测还真是垃圾货，竟然说我上面的内容没有意义，额……
这个bd的智能检测还真是垃圾货，竟然说我上面的内容没有意义，额……本回答被提问者和网友采纳
image.onload=function(){
div.style.height=(this.height*div.offsetWidth)/this.width + "px";
}
这个bd的智能检测还真是垃圾货，竟然说我上面的内容没有意义，额……
这个bd的智能检测还真是垃圾货，竟然说我上面的内容没有意义，额……本回答被提问者和网友采纳
第3个回答 2013-04-30
new Image(); 我粗略一看代码不错。
但仔细一看
这是html5增加的image对象
在ie9以上浏览器或其他浏览器可以使用
offsetWidth支持也不同
最重要的是少了加载完成事件onload 图片没加载完怎么用
后面不加px也是可以的事实证明一切 但最好加上
但仔细一看
这是html5增加的image对象
在ie9以上浏览器或其他浏览器可以使用
offsetWidth支持也不同
最重要的是少了加载完成事件onload 图片没加载完怎么用
后面不加px也是可以的事实证明一切 但最好加上
相似回答
