实现宽高相等的图片容器

如下图所示，在饿了吗商品详情页，头图是一个宽高相等的图片，如何实现

.image-header{
            position: relative;
            width:100%;
            height:0;
            padding-top:100%;
            img{
                position: absolute;
                top:0;
                left:0;
                width:100%;
                height:100%;

            }
}
利用padding-top值实现