css来控制div正方形自适应

.div{
    width:100%;
    height:0px;
    padding-bottom:100%;
    position:relative;
}
.div img{
        width:100%;
        height:100%;
        position:absolute;
        left:0;
        top:0;
}

<div class="wrap">
    <div class="div">
        <img src="">
    </div>
</div>

原理无论是margin-left还是margin-bottom，如果用百分比表示的话，百分比的对象都是父元素的width。padding也类似，所以用padding来撑起div能够正方形。

下方的图形能够100%，可一看出自身元素的width，height的长宽高是包括padding在内的。

————————————————

原文链接：https://blog.csdn.net/u012536005/article/details/52784633

赏 支付宝扫码打赏 微信扫码打赏

如果本文对你有帮助，欢迎打赏本站