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

一个元素的 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;
            }
          }