css实现一个等比例自适应父级宽高正方形

我们平时在做项目的时候经常会做一个橱窗产品展示的效果，这个效果会更具不同的屏幕来设置一行显示多少个产品，当我们的产品图片需要显示成宽高一行的正方形的时候，这种情况下我们就不能把图片设置成固定宽高。效果如下：

示例：https://jsrun.net/PA3Kp

如果我们想要实现随着屏幕的宽度变化上图的红色区域一直是等比例的正方形，这样的效果我们在不适用flex布局的情况下就可以，margin，或者padding的百分比值特性来实现。

/*省略一些代码...*/
li{
    display: inline-block;
    border: 1px solid #ccc;
    width: 31%;
    letter-spacing: normal;
    margin: 10px 1%;
}
/*最主要的实现代码*/
li div{
	/*当前div的宽度不用设置默认以父级宽度100%显示
	然后给div设置一个padding-top: 100%,或者padding-bottom: 100%;
*/
    padding-bottom: 100%;
    background-color:#c00;
}

/*第二种方式
  借助margin的百分比值，
  同时借助div的伪元素，设置一个margin-top:100%或者margin-bottom: 100%;
  同时给div设置一个overflow来解决外边距塌陷问题。
*/
li div{overflow: hidden;}
li div:after{
	content: '';
	display: block;
	margin-top: 100%;	
}

这里需要解释一下，为什么这样就能实现的，原因是，在css中块元素的 width、height、margin、padding、left、top、bottom、right等属性当取值为百分比的时候，他们都是按照当前元素的包含块来进行计算的。
包含块：意思就是说已他最近的祖先元素。但是当元素如果设置了position:absolute|fixed的情况下，就会按照他最近的具有设置fixed, absolute, relative 或 sticky值的祖先元素进行取值。
所以我们可以利用这一特性来实现一个等比例的正方形。