零分杂记

自适应例如九宫格，图片或者DIV特别是图片宽度100%，如何让高度也能始终保持一个比例？避免出现高低不齐的现象！

1、利用JS控制，监听图片的宽度，再设置图片的高度

2、纯CSS设置图片宽度和高度始终保持比例

2.1、原理：利用padding-top（padding-bottom）的百分比计算是根据层宽度的宽度计算的，如层宽度100px，padding-top:20%就是20px；设置一个外层padding-top（padding-bottom）的空白空间，让内层去填充！如设置一个始终保持正方形的图片，将父层设置padding-top（padding-bottom）100%，宽度100%，高0，得到一个正方形空白空间，内层图片标签img设置position：absolute浮动左0，顶部0，高度100%，宽度100%（图片的高度宽度百分比是根据父层计算！） 填满父层padding出来的正方形空白空间！

2.2、实例：给img加一个父层imgbox

<div class="imgbox">
<img src="imgurl">
</div>

2.3、添加CSS

.imgbox{
position: relative;
width: 100%;
height: 0px;
padding-top: 100%; //padding-bottom都可以
}

.imgbox img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}