欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

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

最好 看看 /node-admin/11536

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


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



var image=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";
};搜索

其他回答

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


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


1
2
3
4
5
6
7
8
<style type="text/css">
#div {
    width100%;
    backgroundurl("bg.jpg"no-repeat;
    background-size100% auto;
    border1px solid #f00;
}
</style>
来自:求助得到的回答

来自  https://zhidao.baidu.com/question/545917193.html

普通分类: