本文依赖于一个基础却又容易混淆的css知识点：当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！
也许你会说，left/right以父元素的width为参照物好理解，但是top/bottom为什么也是以父元素的width为参照物的呢？网上众说纷纭，关键还是看W3C的规范：

直接上代码了：

<div class="wrap">

    <div class="div">

        <img src="">

    </div>

</div>

<style>

.wrap{width:500px;}

.div{

    width:100%;

    height:0px;

    padding-bottom:100%;

    position:relative;

}

.div img{

        width:100%;

        height:100%;

        position:absolute;

}

</style>