将item的高度设置为等于项

Question

我想将div的高度设置为等于div的宽度。棘手的是div没有设置宽度，因为它是响应式的。我附上了我的目标。我想只为此使用CSS。

  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-icon  name="add"></ion-icon>
        <h3>SIDE</h3>
      </ion-col>
      <ion-col>
        <ion-icon name="add"></ion-icon>
        <h3>FRONT</h3>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-icon name="add" ></ion-icon>
        <h3>TOP</h3>
      </ion-col>
      <ion-col>
        <ion-icon name="add" ></ion-icon>
        <h3>SEAT</h3>
      </ion-col>
    </ion-row>    
  </ion-grid>

Answer 1

如果你想要像素完美（相同的高度，相同的宽度），你可以使用这个公式：

.stretchy-wrapper {
    width: 100%;
    padding-bottom: 100%; /* 1:1 */
    position: relative;
}

里面：

.container-div {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}

这里是个小提琴：https://jsfiddle.net/a2j4sv2n/3/。