文章摘要：元素的等比例缩放在做自适应网站或者手机站的时候会经常用到实现原理是设置元素宽度width为100%，高度height为0，上边距或者下边距设为百分比，padding-top:60%;其子元素用相对定位宽高设
元素的等比例缩放在做自适应网站或者手机站的时候会经常用到，如下图所示
自适应站或手机站中由于父元素的宽度不是固定值，白色元素的宽度也不是具体的数字，高度的话也就无法填写固定的值，如果高度height设为auto的话，如果子元素里的内容不同的话高度就不同，会产生错位效果。怎么修复这个问题，这时就可以使用下述方法实现等比例缩放。实现原理是设置元素宽度width为100%，高度height为0，上边距或者下边距设为百分比，padding-top:60%;其子元素用相对定位宽高设为100%；这样就实现一个宽高比为5:3的元素。
假如上述布局为<ul><li><a><div><div></a></li><li><a><div><div></a></li><li><a><div><div></a></li><li><a><div><div></a></li><li><a><div><div></a></li><li><a><div><div></a></li></ul>- ul{width:auto;height:auto;overflow:hidden;padding:10px;}
- ul li{width:33%;float:left;margin:0 0.5% 0.5% 0;}
- ul li a{width:100%;height:0;padding-top:60%;position:relative;}
- ul li a div{width:100%;height:100%;position:absolute;top:0;left:0;}
