css来控制img正方形自适应

css来控制div正方形自适应

<div class="wrap">
    <div class="div">
        <img src="">
    </div>
</div>
1
2
3
4
5

.div{
    width:100%;
    height:0px;
    padding-bottom:100%;
    position:relative;
}
.div img{
        width:100%;
        height:100%;
        position:absolute;
}
1
2
3
4
5
6
7
8
9
10
11

原理无论是margin-left还是margin-bottom，如果用百分比表示的话，百分比的对象都是父元素的width。padding也类似，所以用padding来撑起div能够正方形。 
下方的图形能够100%，可一看出自身元素的width，height的长宽高是包括padding在内的。