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

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

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

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

   
		   
		   
   
   
        

               

			   demo1

			   demo1

			   demo1

			   
		
   

  

二、通过js实现

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

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

   
		   
		   
   
   
    

		

				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

下载demo