css实现 元素宽高等比 宽高相同

Daming 2018-12-27
0条评论 795 次浏览
Daming 2018-12-270条评论 795 次浏览

一个元素的 padding,如果值是一个百分比,那这个百分比是相对于其父元素的宽度而言的,即使对于 padding-bottom 和 padding-top 也是如此,,

下方是实现一个列表中 图片等比显示的效果, 如果要 显示成正方形 ,width 和padding-top设置成一样即可。里边的元素 使用绝对定位固定位置

.article-img{
            width: 30%;
            padding-top:25%;
            background-color: #67d1ff;
            position: relative;
            img{
              width: 100%;
              height: 100%;
              position: absolute;
              top: 0;
              left: 0;
            }
          }
1+

发表评论

电子邮件地址不会被公开。