创建一个宽高等比例的容器

html

<div class="parent">
        sdadas
        <div class="child"></div>
      </div>

css

• parent和after生成一个等比例的容器
• child和里面的内容均不会撑开parent的宽度和高度

.parent{
  width: 200px;
  background: red;
  display: flex;
}
.parent::after {
  content: '';
  padding-top: 100%; 
  /* // 是parent的宽度 */
}
.child{
  width: 100px;
  height: 100px;
  background: blue;
}

效果图