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

资源ID：
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

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




用image的onload来触发嘛雀胡：
image.onload=function(){
div.style.height=(this.height*div.offsetWidth)/this.width + "px";
}
这个bd的智能顷扰拦检测还真是垃圾货，竟然说我上面的内容没有意义，额……
这个bd的智能检测还真是垃圾货，竟然说我上面的李核内容没有意义，额……
new Image(); 我粗略一看代码不消陆错。
但仔细一敏闹看
这是html5增加的image对象
在ie9以上浏览器或其他浏览器可以使用
offsetWidth支持也不同
最重要的是少了加载完成事件onload 图片没加载完怎么用
后面不加px也是可以的拿拿顷事实证明一切 但最好加上
← 上一篇： 下一篇： →