css来控制div正方形图片自适应

<div class="imgPanel">

     <img src="" alt="图片">

</div>

<style lang="less" scoped>

      imgPanel{

            width: 100%;

            height: 0;

            overflow: hidden;

            padding-bottom: 100%;

            position: relative;

            img {

                  width: 100%;

                height: 100%;

                position: absolute;

            }

}

</style>

<div class="wrap">

    <div class="div">

        <img src="">

    </div>

</div>

css：

.div{

    width:100%;

    height:0px;

    padding-bottom:100%;

    position:relative;

}

.div img{

        width:100%;

        height:100%;

        position:absolute;

}