html页面宽高比例,实现Html网页DOM元素等比例宽高的2种方式

自己经常遇到宽度设置成百分比格式，随窗口变化而变化，但因为高度问题会导致Dom元素变形的问题，在这里记录一下解决方法。

一、通过设置Height:0+padding实现

主要通过padding百分比根据宽度计算实现的，将父元素Height设为0,子元素设置padding-top或padding-bottom

div{border:1px solid #333;}

.father{width:300px;float:left;margin-left:100px}

.son{height:0px; padding-bottom:40%;}

demo1

demo1

demo1

二、通过js实现

例如设置class为dengbi-4vs3，宽度为300，在页面加载和窗口大小变化时，js进行计算，找到“dengbi-”开头的元素，

后面字符串"4vs3"的意思为“宽度vs高度”，代表宽高比,计算出高度225；这里宽度、高度可为小数，但小数点需要下划线代替：dengbi-2vs1_5。

div{border:1px solid #333;}

.father{width:300px;float:left;margin-left:100px}

demo2

js代码:document.addEventListener('readystatechange',function(){

if(document.readyState=='interactive'){

dengbijisuan();

}

});

window.onresize = function(){

dengbijisuan();

}

/**对元素进行宽跟高等比计算dengbi—4vs2**/

function dengbijisuan(){

//查找所有class以dengbi—开头的元素

var key="dengbi-";

var doms=$('*[class*="'+key+'"]');

//循环处理

var myReg=/\s*dengbi-[0-9_]+vs[0-9_]+\s*/gi;

for(var i=0;i

var dom=doms[i];

//解析class,获得宽高比

var classNames=$(dom).prop("class");

var classArray= classNames.match(myReg);

if(classArray==undefined||classArray.length==0){

continue;

}

var realClassName=classArray[classArray.length-1];

realClassName = realClassName.replace(/(^\s+)|(\s+$)/g,"");

realClassName = realClassName.substring(key.length);

var splitStrs=realClassName.split("vs");

var w_str=splitStrs[0].replace(/_/, ".");

var h_str=splitStrs[1].replace(/_/, ".");

var w_int=parseInt(w_str);

var h_int=parseInt(h_str);

//获得当前元素的宽度值

var dom_w=$(dom).width();

//计算高度

var dom_h=Math.floor(dom_w/w_int*10000)/10000*h_int;

//给当前元素赋高度值

$(dom).height(dom_h+"px");

}

}下载demo