css来控制img正方形自适应

最新推荐文章于 2024-07-05 23:24:20 发布

webmi

最新推荐文章于 2024-07-05 23:24:20 发布

阅读量195

点赞数

小程序专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用CSS的padding属性来创建一个响应式的正方形Div的方法，这种方法使得Div无论在何种屏幕尺寸下都能保持正方形的比例。通过设置padding-bottom为100%并结合相对定位，可以实现一个不依赖于固定宽度的高度自适应正方形布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css来控制div正方形自适应

<div class="wrap">
    <div class="div">
        [外链图片转存失败(img-bcKBCvfV-1562059238005)(https://mp.youkuaiyun.com/mdeditor/94458762)]
    </div>
</div>

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

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

转载 https://blog.youkuaiyun.com/qq_36614846/article/details/78974550