将项目的高度设置为等于项目的宽度答案

【问题标题】：Set height of item to equal the width of the item将项目的高度设置为等于项目的宽度
【发布时间】：2017-11-14 08:49:33
【问题描述】：

我想将 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>

【问题讨论】：

这里有一个有趣的选项：stackoverflow.com/questions/19068070/…（您可以根据需要使用 20vw、33vw 等）

标签： html css

【解决方案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 小提琴：https://jsfiddle.net/a2j4sv2n/3/。

【讨论】：