手机端正方形自适应

利用 padding 来实现和利用css的伪类 after 或者before 来撑开

width 百分之几 padding 百分之几  一样的宽度

具体代码如下

 

.product-image {
    position: relative;
    display: inline-block;
    width: 100%;
    overflow: hidden;
}
.product-image:before {
    display: block;
    content: ' ';
    padding-bottom: 100%;
    width: 1PX;
}
.product-image img {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
}