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

Posted 2023-03-06

【中文标题】将项目的高度设置为等于项目的宽度

【英文标题】：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>

【问题讨论】：

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

【参考方案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/。