css实现自适应正方形

< style >

/* 第一种 */

.placeholder {

width: 100px;

height: 0;

padding-bottom: 100px; /* margin 百分比相对宽度计算 */

background: #eee;

}

/* 第二种 */

.placeholder {

width: 100px;

height: 100vw;

}

/* 第三种 */

.placeholder {

width: 100%;

overflow: hidden;

}

.placeholder:after {

content: '';

display: block;

margin-top: 100%; /* margin 百分比相对父元素宽度计算 */

}

</style>

< div class= "placeholder" ></ div >