利用css来控制img正方形自适应

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

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

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

喜欢 ()or分享