html - 将元素的高度设置为等于元素的宽度

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;
}

这是一个 js fiddle :https://jsfiddle.net/a2j4sv2n/3/ .