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

Question

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

Answer 1

你怎么知道我有答案？昨天是回答了，结果无缘无故被弊，再试试吧

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

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

来自：求助得到的回答

Answer 2

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

或

varimage=new Image();
image.src=//你的背景图片的src;
image.addEventListener("complete",evt);
function evt(){
var divelement = document.getElementById(你的div的id);
divelement.style.height=(image.height*divelement.offsetWidth)/image.width +"px";
};本回答被提问者采纳